<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular-xeditable :: Edit in place for AngularJS</title>
    <!--theme: Bootstrap 3-->
    <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="screen">
    <!--ui-select css-->
    <link href="bower_components/angular-ui-select/dist/select.css" rel="stylesheet" media="screen">
    <!--ng-tags css-->
    <link href="bower_components/ng-tags-input/ng-tags-input.css" rel="stylesheet" media="screen">
    <link href="bower_components/ng-tags-input/ng-tags-input.bootstrap.css" rel="stylesheet" media="screen">
    <!--jquery-ui css-->
    <link href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css" rel="stylesheet" media="screen">
    <!--xeditable css-->
    <link href="dist/css/xeditable.css" rel="stylesheet" media="screen">
    <!--docs css-->
    <link href="docs/css/docs.css" rel="stylesheet" media="screen">
    <!--jquery (needed for bootstrap)-->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <!--jquery ui-->
    <script src="bower_components/jquery-ui/jquery-ui.js"></script>
    <!--angular-->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-mocks/angular-mocks.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <!--bootstrap-->
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <!--angular-ui-date-->
    <script src="bower_components/angular-ui-date/dist/date.js"></script>
    <!--angular-ui-bootstrap-->
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <!--ui-select-->
    <script src="bower_components/angular-ui-select/dist/select.js"></script>
    <!--ng-tags-->
    <script src="bower_components/ng-tags-input/ng-tags-input.js"></script>
    <!--moment-->
    <script src="bower_components/moment/moment.js"></script>
    <!--google-code-prettify-->
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
    <!--checklist-model-->
    <script src="bower_components/checklist-model/checklist-model.js"></script>
    <!--app-->
    <script src="docs/js/app.js"></script>
    <!--xeditable-->
    <script src="dist/js/xeditable.min.js"></script>
  </head>
  <body data-spy="scroll" data-target=".sidebar">
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Angular-xeditable </a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="https://github.com/vitalets/angular-xeditable">GitHub</a></li>
          </ul>
          <form class="navbar-form navbar-right"><a href="zip/angular-xeditable-0.10.2.zip" style="font-weight:bold" class="btn btn-primary"><span style="margin-right:10px" class="glyphicon glyphicon-save"></span>Download 0.10.2 ~ kb</a></form>
          <div style="padding-top: 13px">
<!-- google+ -->
<div id="socials" style="text-align: center">
<div style="display: inline-block" class="g-plusone" data-size="medium" data-href="http://vitalets.github.io/angular-xeditable"></div>
<script type="text/javascript">
  (function() {
    if (!isProd()) return;
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>


<!-- facebook -->
<div id="fb-root" style="display: inline-block"></div>
<script>
(function(d, s, id) {
  if (!isProd()) return;
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=558710054143871";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div style="vertical-align:top;zoom:1;*display:inline;display: inline-block; text-align:left; margin: 1px 30px 0 0" class="fb-like" data-href="http://vitalets.github.io/angular-xeditable" data-send="false" data-layout="button_count" data-width1="450" data-show-faces="false"></div>


<!-- twitter -->
<a style="vertical-align:top" href="https://twitter.com/share" class="twitter-share-button" data-url="http://vitalets.github.io/angular-xeditable" data-via="xeditable">Tweet</a>
<script>!function(d,s,id){
  if (!isProd()) return;
  var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  </script>            
</div>
          </div>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="row">
        <div class="col-sm-3 col-xs-12">
          <div class="well sidebar">
            <ul class="nav">
              <li><a href="#overview">Overview</a>
                <ul class="nav">
                </ul>
              </li>
              <li><a href="#getstarted">Get started</a>
                <ul class="nav">
                </ul>
              </li>
              <li><a href="#text-simple">Controls</a>
                <ul class="nav">
                  <li><a href="#text-simple">Text</a></li>
                  <li><a href="#select-local">Select local</a></li>
                  <li><a href="#select-remote">Select remote</a></li>
                  <li><a href="#html5-inputs">HTML5 inputs</a></li>
                  <li><a href="#textarea">Textarea</a></li>
                  <li><a href="#checkbox">Checkbox</a></li>
                  <li><a href="#checklist">Checklist</a></li>
                  <li><a href="#radiolist">Radiolist</a></li>
                  <li><a href="#bsdate">Date</a></li>
                  <li><a href="#uidate">UI Date</a></li>
                  <li><a href="#bstime">Time</a></li>
                  <li><a href="#combodate">DateTime</a></li>
                  <li><a href="#typeahead">Typeahead</a></li>
                  <li><a href="#uiselect">UI-Select</a></li>
                  <li><a href="#ngtags">ngTagsInput</a></li>
                </ul>
              </li>
              <li><a href="#text-customize">Techniques</a>
                <ul class="nav">
                  <li><a href="#text-customize">Customize input</a></li>
                  <li><a href="#text-btn">Trigger manually</a></li>
                  <li><a href="#select-nobuttons">Hide buttons</a></li>
                  <li><a href="#select-multiple">Select multiple</a></li>
                  <li><a href="#validate-local">Validate local</a></li>
                  <li><a href="#validate-remote">Validate remote</a></li>
                  <li><a href="#edit-disabled">Disable editing</a></li>
                  <li><a href="#editable-popover">Editable Popover</a></li>
                  <li><a href="#uipopover">Editable ui-bootstrap Popover</a></li>
                  <li><a href="#e-single">Single editable in a form</a></li>
                </ul>
              </li>
              <li><a href="#onbeforesave">Submit</a>
                <ul class="nav">
                  <li><a href="#onbeforesave">Onbeforesave</a></li>
                  <li><a href="#onaftersave">Onaftersave</a></li>
                </ul>
              </li>
              <li><a href="#editable-form">Forms</a>
                <ul class="nav">
                  <li><a href="#editable-form">Editable form</a></li>
                </ul>
              </li>
              <li><a href="#editable-row">Tables</a>
                <ul class="nav">
                  <li><a href="#editable-row">Editable row</a></li>
                  <li><a href="#editable-column">Editable column</a></li>
                  <li><a href="#editable-table">Editable table</a></li>
                </ul>
              </li>
              <li><a href="#bootstrap3">Themes</a>
                <ul class="nav">
                  <li><a href="#bootstrap3">Bootstrap 3</a></li>
                  <li><a href="#bootstrap2">Bootstrap 2</a></li>
                  <li><a href="#default">Default</a></li>
                </ul>
              </li>
              <li><a href="#ref-element">Reference</a>
                <ul class="nav">
                  <li><a href="#ref-element">Editable element</a></li>
                  <li><a href="#ref-form">Editable form</a></li>
                  <li><a href="#ref-options">Editable options</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-9 col-xs-12">
          <!-- render-->
          <section id="overview"></section>
          <h1>Overview</h1>
          <!-- jade cannot include dynamically--><p><strong>Angular-xeditable</strong> is a bundle of <a href="http://angularjs.org">AngularJS</a> directives that allows you to create
<em>editable elements</em>.
Such technique is also known as <em>click-to-edit</em> or <em>edit-in-place</em>.
It is based on ideas of <a href="http://vitalets.github.io/x-editable">x-editable</a> but was written from scratch
to use power of angular and support complex forms / editable grids.</p>

          <h4>Dependencies</h4><p>Basically it does not depend on any libraries except <a href="http://angularjs.org">AngularJS</a> itself.
For themes you may need to include <a href="http://getbootstrap.com">Twitter Bootstrap</a> CSS.
For some extra controls (e.g. datepicker) you may need to include <a href="http://angular-ui.github.io/bootstrap/">angular-ui bootstrap</a> for Bootstrap 2/3.
Include <a href="https://morgul.github.io/ui-bootstrap4/">ui-bootstrap4</a> for Bootstrap 4.
For ui-select you may need to include <a href="https://github.com/angular-ui/ui-select/">angular-ui ui-select</a>.
For ngTagsInput you may need to include <a href="https://github.com/mbenford/ngTagsInput">mbenford ngTagsInput</a>.
If installing via NPM, jQuery and moment js will also be installed.</p>

          <h4>Controls & Features</h4>
          <table style="width: 50%; min-width: 200px">
            <tr>
              <td style="width: 50%; vertical-align: top"><ul>
<li><a href="#text-simple">text</a></li>
<li><a href="#textarea">textarea</a></li>
<li><a href="#select-local">select</a></li>
<li><a href="#checklist">checkbox</a></li>
<li><a href="#radiolist">radio</a></li>
<li><a href="#bsdate">date</a></li>
<li><a href="#bstime">time</a></li>
<li><a href="#combodate">datetime</a></li>
<li><a href="#html5-inputs">html5 inputs</a></li>
<li><a href="#typeahead">typeahead</a></li>
<li><a href="#uiselect">ui-select</a></li>
<li><a href="#ngtags">ngTagsInput</a></li>
</ul>

              </td>
              <td style="width: 50%; vertical-align: top"><ul>
<li><a href="#editable-form">complex form</a></li>
<li><a href="#editable-row">editable row</a></li>
<li><a href="#editable-column">editable column</a></li>
<li><a href="#editable-table">editable table</a></li>
<li><a href="#themes">themes</a></li>
</ul>

              </td>
            </tr>
          </table>
          <section id="getstarted"></section>
          <h1>Get started</h1>
          <!-- jade cannot include dynamically-->
          <ol>
            <li><p>Include <a href="http://angularjs.org">Angular.js</a> in your project</p>

              <pre class="prettyprint">&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js&quot;&gt;&lt;/script&gt;</pre><p>Optionally include <a href="http://getbootstrap.com">Bootstrap</a> CSS for theming</p>
<p>Bootstrap 3</p>

              <pre class="prettyprint">&lt;link href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre><p>Boostrap 4</p>

              <pre class="prettyprint">&lt;link href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre>
            </li>
            <li><span>Install angular-xeditable via</span><a href="http://bower.io" target="_blank">bower</a><span> or</span><a href="zip/angular-xeditable-0.10.2.zip">download latest zip</a>
              <pre class="prettyprint">bower install angular-xeditable</pre>
            </li>
            <li>Include angular-xeditable into your project
              <pre class="prettyprint">&lt;link href=&quot;bower_components/angular-xeditable/dist/css/xeditable.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;bower_components/angular-xeditable/dist/js/xeditable.js&quot;&gt;&lt;/script&gt;</pre>
            </li>
            <li>Define angular app and add "xeditable" to dependencies
              <pre class="prettyprint">&lt;html ng-app=&quot;app&quot;&gt;</pre>
              <pre class="prettyprint">var app = angular.module("app", ["xeditable"]);</pre>
            </li>
            <li>Set theme in app.run:
              <pre class="prettyprint">app.run(['editableOptions', function(editableOptions) {
  editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs4', 'bs2', 'default'
}]);
</pre>
            </li>
            <li>Markup element that should be editable
              <pre ng-non-bindable class="prettyprint">&lt;div ng-controller=&quot;Ctrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot;&gt;{{ user.name || &quot;empty&quot; }}&lt;/a&gt;
&lt;/div&gt;</pre>
            </li>
            <li>Define controller
              <pre class="prettyprint">app.controller('Ctrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };
});</pre>
            </li>
            <li>Enjoy!
              <div style="padding-top: 5px"><a href="starter" target="_blank" class="btn btn-success">View starter template</a><a href="zip/angular-xeditable-starter.zip" style="margin-left: 10px" class="btn btn-primary">Download starter zip</a></div>
            </li>
          </ol>
                    <section id="text-simple">
                      <h1>Text</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19035/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="TextSimpleCtrl" id="TextSimpleCtrl">
  <a href="#" editable-text="user.name" e-label="User Name">{{ user.name || 'empty' }}</a>
</div></div>
                      <pre>{{ debug["text-simple"] | json }}</pre>
                      <p><p>To make element editable via textbox just add <code>editable-text=&quot;model.field&quot;</code> attribute.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('TextSimpleCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["text-simple"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;TextSimpleCtrl&quot; id=&quot;TextSimpleCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; e-label=&quot;User Name&quot;&gt;{{ user.name || 'empty' }}&lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('TextSimpleCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});</pre>
                    </section>
                    <section id="select-local">
                      <h1>Select local</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19036/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="SelectLocalCtrl">
  <a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
    {{ showStatus() }}
  </a>
</div></div>
                      <pre>{{ debug["select-local"] | json }}</pre>
                      <p><p>To create editable select (dropdown) just set <code>editable-select</code> attribute pointing to model.
To pass dropdown options you should define <code>e-ng-options</code> attribute
that works like normal angular <code>ng-options</code> but is transfered to underlying <code>&lt;select&gt;</code> from original element.
To set a default option in the list add the <code>e-placeholder</code> attribute.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('SelectLocalCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["select-local"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;SelectLocalCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-select=&quot;user.status&quot; e-ng-options=&quot;s.value as s.text for s in statuses&quot;&gt;
    {{ showStatus() }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('SelectLocalCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status &amp;&amp; selected.length) ? selected[0].text : 'Not set';
  };
});</pre>
                    </section>
                    <section id="select-remote">
                      <h1>Select remote</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19039/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="SelectRemoteCtrl">
  <a href="#" editable-select="user.group" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
    {{ user.groupName || 'not set' }}
  </a>
</div></div>
                      <pre>{{ debug["select-remote"] | json }}</pre>
                      <p><p>To load select options from remote url you should define <code>onshow</code> attribute pointing to scope function.
The result of function should be a $http promise, it allows to disable element while loading.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('SelectRemoteCtrl', function($scope, $filter, $http) {
  $scope.user = {
    group: 4,
    groupName: 'admin' // original value
  }; 

  $scope.groups = [];

  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.$watch('user.group', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      var selected = $filter('filter')($scope.groups, {id: $scope.user.group});
      $scope.user.groupName = selected.length ? selected[0].text : null;
    }
  });
$scope.$watch("user", function(v) { $scope.$parent.debug["select-remote"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;SelectRemoteCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-select=&quot;user.group&quot; onshow=&quot;loadGroups()&quot; e-ng-options=&quot;g.id as g.text for g in groups&quot;&gt;
    {{ user.groupName || 'not set' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('SelectRemoteCtrl', function($scope, $filter, $http) {
  $scope.user = {
    group: 4,
    groupName: 'admin' // original value
  }; 

  $scope.groups = [];

  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.$watch('user.group', function(newVal, oldVal) {
    if (newVal !== oldVal) {
      var selected = $filter('filter')($scope.groups, {id: $scope.user.group});
      $scope.user.groupName = selected.length ? selected[0].text : null;
    }
  });
});</pre>
                    </section>
                    <section id="html5-inputs">
                      <h1>HTML5 inputs</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19040/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="Html5InputsCtrl" id="Html5InputsCtrl">
  <div>Email: <a href="#" editable-email="user.email">{{ user.email || 'empty' }}</a></div>
  <div>Tel: <a href="#" editable-tel="user.tel" e-pattern="\d{3}-\d{2}-\d{2}" e-title="xxx-xx-xx">{{ user.tel || 'empty' }}</a></div>
  <div>Number: <a href="#" editable-number="user.number" e-min="18">{{ user.number || 'empty' }}</a></div>  
  <div>Range: <a href="#" editable-range="user.range" e-step="5">{{ user.range || 'empty' }}</a></div>  
  <div>Url: <a href="#" editable-url="user.url">{{ user.url || 'empty' }}</a></div>  
  <div>Search: <a href="#" editable-search="user.search">{{ user.search || 'empty' }}</a></div>
  <div>Color: <a href="#" editable-color="user.color">{{ user.color || 'empty' }}</a></div>  
  <div>Date: <a href="#" editable-date="user.date">{{ (user.date | date: "yyyy-MM-dd") || 'empty' }}</a></div>
  <div>Time: <a href="#" editable-time="user.time">{{ (user.time | date: "HH:mm") || 'empty' }}</a></div>
  <div>Month: <a href="#" editable-month="user.month">{{ (user.month | date: "yyyy-MM") || 'empty' }}</a></div>
  <div>Week: <a href="#" editable-week="user.week">{{ (user.week | date: "yyyy-Www") || 'empty'}}</a></div>
  <div>Password: <a href="#" editable-password="user.password">{{ user.password || 'empty' }}</a></div>
  <div>Datetime-local: <a href="#" editable-datetime-local="user.datetimeLocal">{{ (user.datetimeLocal | date: "yyyy-MM-ddTHH:mm:ss") || 'empty' }}</a></div>
  <div>File: <a href="#" editable-file="user.file">{{ user.file || 'empty' }}</a></div>
</div></div>
                      <pre>{{ debug["html5-inputs"] | json }}</pre>
                      <p><p>Following HTML5 types are supported via <code>editable-xxx</code> directive:</p>
<ul>
<li>email</li>
<li>tel</li>
<li>number</li>
<li>search</li>
<li>range</li>
<li>url</li>
<li>color</li>
<li>date</li>
<li>time</li>
<li>month</li>
<li>week</li>
<li>password</li>
<li>datetime-local</li>
</ul>
<p>Please <a href="http://caniuse.com/">check browser support</a> before using particular type in your project.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('Html5InputsCtrl', function($scope) {
  $scope.user = {
    email: 'email@example.com',
    tel: '123-45-67',
    number: 29,
    range: 10,
    url: 'http://example.com',
    search: 'blabla',
    color: '#6a4415',
    date: null,
    time: new Date(1970, 0, 1, 12, 30),
    month: null,
    week: null,
    password: 'password',
    datetimeLocal: null,
    file: null
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["html5-inputs"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;Html5InputsCtrl&quot; id=&quot;Html5InputsCtrl&quot;&gt;
  &lt;div&gt;Email: &lt;a href=&quot;#&quot; editable-email=&quot;user.email&quot;&gt;{{ user.email || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Tel: &lt;a href=&quot;#&quot; editable-tel=&quot;user.tel&quot; e-pattern=&quot;\d{3}-\d{2}-\d{2}&quot; e-title=&quot;xxx-xx-xx&quot;&gt;{{ user.tel || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Number: &lt;a href=&quot;#&quot; editable-number=&quot;user.number&quot; e-min=&quot;18&quot;&gt;{{ user.number || 'empty' }}&lt;/a&gt;&lt;/div&gt;  
  &lt;div&gt;Range: &lt;a href=&quot;#&quot; editable-range=&quot;user.range&quot; e-step=&quot;5&quot;&gt;{{ user.range || 'empty' }}&lt;/a&gt;&lt;/div&gt;  
  &lt;div&gt;Url: &lt;a href=&quot;#&quot; editable-url=&quot;user.url&quot;&gt;{{ user.url || 'empty' }}&lt;/a&gt;&lt;/div&gt;  
  &lt;div&gt;Search: &lt;a href=&quot;#&quot; editable-search=&quot;user.search&quot;&gt;{{ user.search || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Color: &lt;a href=&quot;#&quot; editable-color=&quot;user.color&quot;&gt;{{ user.color || 'empty' }}&lt;/a&gt;&lt;/div&gt;  
  &lt;div&gt;Date: &lt;a href=&quot;#&quot; editable-date=&quot;user.date&quot;&gt;{{ (user.date | date: &quot;yyyy-MM-dd&quot;) || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Time: &lt;a href=&quot;#&quot; editable-time=&quot;user.time&quot;&gt;{{ (user.time | date: &quot;HH:mm&quot;) || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Month: &lt;a href=&quot;#&quot; editable-month=&quot;user.month&quot;&gt;{{ (user.month | date: &quot;yyyy-MM&quot;) || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Week: &lt;a href=&quot;#&quot; editable-week=&quot;user.week&quot;&gt;{{ (user.week | date: &quot;yyyy-Www&quot;) || 'empty'}}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Password: &lt;a href=&quot;#&quot; editable-password=&quot;user.password&quot;&gt;{{ user.password || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;Datetime-local: &lt;a href=&quot;#&quot; editable-datetime-local=&quot;user.datetimeLocal&quot;&gt;{{ (user.datetimeLocal | date: &quot;yyyy-MM-ddTHH:mm:ss&quot;) || 'empty' }}&lt;/a&gt;&lt;/div&gt;
  &lt;div&gt;File: &lt;a href=&quot;#&quot; editable-file=&quot;user.file&quot;&gt;{{ user.file || 'empty' }}&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('Html5InputsCtrl', function($scope) {
  $scope.user = {
    email: 'email@example.com',
    tel: '123-45-67',
    number: 29,
    range: 10,
    url: 'http://example.com',
    search: 'blabla',
    color: '#6a4415',
    date: null,
    time: new Date(1970, 0, 1, 12, 30),
    month: null,
    week: null,
    password: 'password',
    datetimeLocal: null,
    file: null
  };  
});</pre>
                    </section>
                    <section id="textarea">
                      <h1>Textarea</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19041/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="TextareaCtrl" id="TextareaCtrl">
  <a href="#" editable-textarea="user.desc" e-rows="7" e-cols="40">
    <pre>{{ user.desc || 'no description' }}</pre>
  </a>
</div></div>
                      <pre>{{ debug["textarea"] | json }}</pre>
                      <p><p>To make element editable via textarea just add <code>editable-textarea</code> attribute
pointing to model in scope. You can also wrap content into <code>&lt;pre&gt;</code> tags to keep linebreaks.<br>Data can be submitted by <em>Ctrl + Enter</em>.  
Data can be submitted by <em>Enter</em> if the attribute <code>submit-on-enter=&quot;true&quot;</code> is used.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('TextareaCtrl', function($scope) {
  $scope.user = {
    desc: 'Awesome user \ndescription!'
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["textarea"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;TextareaCtrl&quot; id=&quot;TextareaCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-textarea=&quot;user.desc&quot; e-rows=&quot;7&quot; e-cols=&quot;40&quot;&gt;
    &lt;pre&gt;{{ user.desc || 'no description' }}&lt;/pre&gt;
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('TextareaCtrl', function($scope) {
  $scope.user = {
    desc: 'Awesome user \ndescription!'
  };
});</pre>
                    </section>
                    <section id="checkbox">
                      <h1>Checkbox</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19042/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="CheckboxCtrl">
  <a href="#" editable-checkbox="user.remember" e-title="Remember?">
    {{ user.remember && "Remember me!" || "Don't remember" }}
  </a>
</div></div>
                      <pre>{{ debug["checkbox"] | json }}</pre>
                      <p><p>To make element editable via checkbox just add <code>editable-checkbox</code> attribute 
pointing to model in scope. Set <code>e-title</code> attribute to define text shown with checkbox.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('CheckboxCtrl', function($scope) {
  $scope.user = {
    remember: true
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["checkbox"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;CheckboxCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-checkbox=&quot;user.remember&quot; e-title=&quot;Remember?&quot;&gt;
    {{ user.remember &amp;&amp; &quot;Remember me!&quot; || &quot;Don't remember&quot; }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('CheckboxCtrl', function($scope) {
  $scope.user = {
    remember: true
  };  
});</pre>
                    </section>
                    <section id="checklist">
                      <h1>Checklist</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="ChecklistCtrl">
  <a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses" e-ng-disabled="disableCheckbox(s.value)">
    {{ showStatus() }}
  </a>
</div></div>
                      <pre>{{ debug["checklist"] | json }}</pre>
                      <p><p>To create list of checkboxes use <code>editable-checklist</code> attribute pointing to model.
Also you should define <code>e-ng-options</code> attribute to set value and display items.
Optionally define <code>e-checklist-comparator</code> to use a function to determine which checkboxes are actually checked.  </p>
<p><strong>Please note</strong>, you should include <a href="http://vitalets.github.io/checklist-model">checklist-model directive</a> into your app: <code>var app = angular.module(&quot;app&quot;, [..., &quot;checklist-model&quot;]);</code>.    </p>
<p>To disable a checkbox include the attribute <code>e-ng-disabled</code> and pass a condition.</p>
<p>By default, checkboxes aligned <em>horizontally</em>. To align <em>vertically</em> just add following <strong>CSS</strong>:</p>
<pre><code>.editable-checklist label {
  display: block;
}</code></pre></p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('ChecklistCtrl', function($scope, $filter) {
  $scope.user = {
    status: [2, 3]
  };

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'}
  ];

  $scope.showStatus = function() {
    var selected = [];
    angular.forEach($scope.statuses, function(s) {
      if ($scope.user.status.indexOf(s.value) >= 0) {
        selected.push(s.text);
      }
    });
    return selected.length ? selected.join(', ') : 'Not set';
  };

  $scope.disableCheckbox = function (v) {
    if ($scope.user.status.indexOf(v) === -1) {
      return true
    }
    return false;
  }

$scope.$watch("user", function(v) { $scope.$parent.debug["checklist"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;ChecklistCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-checklist=&quot;user.status&quot; e-ng-options=&quot;s.value as s.text for s in statuses&quot; e-ng-disabled=&quot;disableCheckbox(s.value)&quot;&gt;
    {{ showStatus() }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('ChecklistCtrl', function($scope, $filter) {
  $scope.user = {
    status: [2, 3]
  };

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'}
  ];

  $scope.showStatus = function() {
    var selected = [];
    angular.forEach($scope.statuses, function(s) {
      if ($scope.user.status.indexOf(s.value) &gt;= 0) {
        selected.push(s.text);
      }
    });
    return selected.length ? selected.join(', ') : 'Not set';
  };

  $scope.disableCheckbox = function (v) {
    if ($scope.user.status.indexOf(v) === -1) {
      return true
    }
    return false;
  }

});</pre>
                    </section>
                    <section id="radiolist">
                      <h1>Radiolist</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="RadiolistCtrl">
  <a href="#" editable-radiolist="user.status" e-ng-options="s.value as s.text for s in ::statuses track by s.value">
    {{ showStatus() }}
  </a>
</div></div>
                      <pre>{{ debug["radiolist"] | json }}</pre>
                      <p><p>To create list of radios use <code>editable-radiolist</code> attribute pointing to model.
Also you should define <code>e-ng-options</code> attribute to set value and display items.
By default, radioboxes aligned <em>horizontally</em>. To align <em>vertically</em> just add following <strong>CSS</strong>:</p>
<pre><code>.editable-radiolist label {
  display: block;
}</code></pre></p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('RadiolistCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'}
  ]; 

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["radiolist"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;RadiolistCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-radiolist=&quot;user.status&quot; e-ng-options=&quot;s.value as s.text for s in ::statuses track by s.value&quot;&gt;
    {{ showStatus() }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('RadiolistCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'}
  ]; 

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status &amp;&amp; selected.length) ? selected[0].text : 'Not set';
  };
});</pre>
                    </section>
                    <section id="bsdate">
                      <h1>Date</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19043/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="BsdateCtrl">
  <a href="#" editable-bsdate="user.dob"
              e-is-open="opened.$data"
              e-ng-click="open($event,'$data')"
              e-datepicker-popup="dd-MMMM-yyyy">
    {{ (user.dob | date:"dd/MM/yyyy") || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["bsdate"] | json }}</pre>
                      <p><p>Date control is implemented via <a href="http://angular-ui.github.io/bootstrap/#/datepicker">Angular-ui bootstrap datepicker</a>.  
You should include additional <code>ui-bootstrap-tpls.min.js</code> for Bootstrap 3:</p>
<pre class="prettyprint">&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js&quot;&gt;&lt;/script&gt;</pre><p>For Bootstrap 4, include:</p>
<pre class="prettyprint">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/ui-bootstrap4@3.0.6/dist/ui-bootstrap-tpls.js&quot;&gt;&lt;/script&gt;</pre><p>Add <code>ui.bootstrap</code> as module dependency:</p>
<pre class="prettyprint">var app = angular.module(&quot;app&quot;, [&quot;xeditable&quot;, &quot;ui.bootstrap&quot;]);</pre><p>And set <code>editable-bsdate</code> attribute in editable element.<br>To make the input field read-only and force the date to be selected from the popup, add the <code>e-readonly=&quot;true&quot;</code> attribute.<br>Add <code>e-ng-change</code> attribute to call a function when the value of the datepicker is changed.<br>To hide the calendar button and display the calendar popup on click of the input field, set the <code>e-show-calendar-button</code> attribute to false.<br>Other parameters can be defined via <code>e-*</code> syntax, e.g. <code>e-datepicker-popup=&quot;dd-MMMM-yyyy&quot;</code>.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('BsdateCtrl', function($scope) {
	$scope.user = {
		dob: new Date(1984, 4, 15)
	};

	$scope.opened = {};

	$scope.open = function($event, elementOpened) {
		$event.preventDefault();
		$event.stopPropagation();

		$scope.opened[elementOpened] = !$scope.opened[elementOpened];
	};
$scope.$watch("user", function(v) { $scope.$parent.debug["bsdate"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;BsdateCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-bsdate=&quot;user.dob&quot;
              e-is-open=&quot;opened.$data&quot;
              e-ng-click=&quot;open($event,'$data')&quot;
              e-datepicker-popup=&quot;dd-MMMM-yyyy&quot;&gt;
    {{ (user.dob | date:&quot;dd/MM/yyyy&quot;) || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('BsdateCtrl', function($scope) {
	$scope.user = {
		dob: new Date(1984, 4, 15)
	};

	$scope.opened = {};

	$scope.open = function($event, elementOpened) {
		$event.preventDefault();
		$event.stopPropagation();

		$scope.opened[elementOpened] = !$scope.opened[elementOpened];
	};
});</pre>
                    </section>
                    <section id="uidate">
                      <h1>UI Date</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="UidateCtrl">
    <span editable-uidate="user.dob"
        e-ui-date="datePickerConfig">
        {{ (user.dob | date:"dd/MM/yyyy") || 'empty' }}
    </span>
</div></div>
                      <pre>{{ debug["uidate"] | json }}</pre>
                      <p><p>Date control is implemented via <a href="https://github.com/angular-ui/ui-date">jQuery UI Datepicker for AngularJS</a>.  </p>
<p>You should install ui-date with bower:</p>
<pre class="prettyprint">    bower install angular-ui-date --save    </pre><p>Add the CSS:</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;bower_components/jquery-ui/themes/smoothness/jquery-ui.css&quot;/&gt;</code></pre>
<p>Load the script files (minimun jQuery version is v2.2.0):</p>
<pre><code class="language-html">&lt;script type=&quot;text/javascript&quot; src=&quot;bower_components/jquery/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;bower_components/jquery-ui/jquery-ui.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;bower_components/angular/angular.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;bower_components/angular-ui-date/dist/date.js&quot;&gt;&lt;/script&gt;</code></pre>
<p>Add the date module as a dependency to your application module:</p>
<pre><code class="language-js">angular.module(&#39;MyApp&#39;, [&#39;ui.date&#39;])</code></pre>
<p>And set <code>editable-uidate</code> attribute in editable element.  </p>
<p>You can pass an <code>e-ui-date</code> attribute pointing to an object with a picker configuration that you may want.</p>
<pre><code class="language-js">var datePickerOptions = {
    changeYear: true,
    changeMonth: true,
    showOn: &quot;button&quot;,
    buttonImage: &quot;build/assets/img/calendar.png&quot;,
    buttonImageOnly: true
};</code></pre>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('UidateCtrl', function($scope) {

    $scope.datePickerConfig = {
        changeYear: true,
        changeMonth: true
    };

    $scope.user = {
        dob: new Date(1985, 3, 11)
    };

$scope.$watch("user", function(v) { $scope.$parent.debug["uidate"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;UidateCtrl&quot;&gt;
    &lt;span editable-uidate=&quot;user.dob&quot;
        e-ui-date=&quot;datePickerConfig&quot;&gt;
        {{ (user.dob | date:&quot;dd/MM/yyyy&quot;) || 'empty' }}
    &lt;/span&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('UidateCtrl', function($scope) {

    $scope.datePickerConfig = {
        changeYear: true,
        changeMonth: true
    };

    $scope.user = {
        dob: new Date(1985, 3, 11)
    };

});</pre>
                    </section>
                    <section id="bstime">
                      <h1>Time</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19046/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="BstimeCtrl">
  <a href="#" editable-bstime="user.time" e-show-meridian="false" e-minute-step="10">
    {{ (user.time | date:"HH:mm") || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["bstime"] | json }}</pre>
                      <p><p>Time control is implemented via <a href="http://angular-ui.github.io/bootstrap/#/timepicker">Angular-ui bootstrap timepicker</a>.  
You should include additional <code>ui-bootstrap-tpls.min.js</code>for Bootstrap 3:</p>
<pre class="prettyprint">&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js&quot;&gt;&lt;/script&gt;</pre><p>For Bootstrap 4, include:</p>
<pre class="prettyprint">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/ui-bootstrap4@3.0.6/dist/ui-bootstrap-tpls.js&quot;&gt;&lt;/script&gt;</pre><p>Add <code>ui.bootstrap</code> as module dependency:</p>
<pre class="prettyprint">var app = angular.module(&quot;app&quot;, [&quot;xeditable&quot;, &quot;ui.bootstrap&quot;]);</pre><p>And set <code>editable-bstime</code> attribute in editable element.
Other parameters can be defined via <code>e-*</code> syntax, e.g. <code>e-minute-step=&quot;10&quot;</code>.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('BstimeCtrl', function($scope) {
  $scope.user = {
    time: new Date(1984, 4, 15, 19, 20)
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["bstime"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;BstimeCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-bstime=&quot;user.time&quot; e-show-meridian=&quot;false&quot; e-minute-step=&quot;10&quot;&gt;
    {{ (user.time | date:&quot;HH:mm&quot;) || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('BstimeCtrl', function($scope) {
  $scope.user = {
    time: new Date(1984, 4, 15, 19, 20)
  };
});</pre>
                    </section>
                    <section id="combodate">
                      <h1>DateTime</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="CombodateCtrl">
  <a href="#" editable-combodate="user.dob">
    {{ (user.dob | date:"medium") || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["combodate"] | json }}</pre>
                      <p><p>You should include additional <code>moment.js</code>:</p>
<p>And set <code>editable-combodate</code> attribute in editable element.
Custom options supported by <a href="https://vitalets.github.io/combodate/">Combodate</a> can be provided via <code>e-*</code> syntax, e.g. <code>e-min-year=&quot;2015&quot;</code>, <code>e-max-year=&quot;2025&quot;</code>.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('CombodateCtrl', function($scope) {
  $scope.user = {
    dob: new Date(1984, 4, 15)
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["combodate"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;CombodateCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-combodate=&quot;user.dob&quot;&gt;
    {{ (user.dob | date:&quot;medium&quot;) || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('CombodateCtrl', function($scope) {
  $scope.user = {
    dob: new Date(1984, 4, 15)
  };
});</pre>
                    </section>
                    <section id="typeahead">
                      <h1>Typeahead</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19049/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="TypeaheadCtrl" id="TypeaheadCtrl">
  <a href="#" editable-text="user.state" e-uib-typeahead="state for state in states | filter:$viewValue | limitTo:8">
    {{ user.state || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["typeahead"] | json }}</pre>
                      <p><p>Typeahead control is implemented via <a href="http://angular-ui.github.io/bootstrap/#/typeahead">Angular-ui bootstrap typeahead</a>.  
Basically it is normal <code>editable-text</code> control with additional <code>e-typeahead</code> attributes.<br>You should include additional <code>ui-bootstrap-tpls.min.js</code>for Bootstrap 3:</p>
<pre class="prettyprint">&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js&quot;&gt;&lt;/script&gt;</pre><p>For Bootstrap 4, include:</p>
<pre class="prettyprint">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/ui-bootstrap4@3.0.6/dist/ui-bootstrap-tpls.js&quot;&gt;&lt;/script&gt;</pre><p>Then add <code>ui.bootstrap</code> as module dependency:</p>
<pre class="prettyprint">var app = angular.module(&quot;app&quot;, [&quot;xeditable&quot;, &quot;ui.bootstrap&quot;]);</pre><p>And finally set <code>editable-text</code> attribute pointing to model and <code>e-uib-typeahead</code> attribute pointing to typeahead items.
Other parameters can be defined via <code>e-typeahead-*</code> syntax, e.g. <code>e-typeahead-wait-ms=&quot;100&quot;</code>.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('TypeaheadCtrl', function($scope) {
  $scope.user = {
    state: 'Arizona'
  };

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
$scope.$watch("user", function(v) { $scope.$parent.debug["typeahead"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;TypeaheadCtrl&quot; id=&quot;TypeaheadCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.state&quot; e-uib-typeahead=&quot;state for state in states | filter:$viewValue | limitTo:8&quot;&gt;
    {{ user.state || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('TypeaheadCtrl', function($scope) {
  $scope.user = {
    state: 'Arizona'
  };

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
});</pre>
                    </section>
                    <section id="uiselect">
                      <h1>UI-Select</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="UiSelectCtrl">
  <form data-editable-form name="uiSelectForm">
    <div editable-ui-select="user.state" data-e-form="uiSelectForm" data-e-name="state" name="state" theme="bootstrap" data-e-ng-model="user.state" data-e-style="min-width:300px;">
      {{user.state}}
      <editable-ui-select-match placeholder="State">
          {{$select.selected}}
      </editable-ui-select-match>
      <editable-ui-select-choices repeat="state in states | filter: $select.search track by $index">
        {{state}}
      </editable-ui-select-choices>
    </div>
    <br/>
    <div class="buttons">
      <!-- button to show form -->
      <button type="button" class="btn btn-default" ng-click="uiSelectForm.$show()" ng-show="!uiSelectForm.$visible">
        Edit
      </button>
      <!-- buttons to submit / cancel form -->
      <span ng-show="uiSelectForm.$visible">
        <br/>
        <button type="submit" class="btn btn-primary" ng-disabled="uiSelectForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="uiSelectForm.$waiting" ng-click="uiSelectForm.$cancel()">
          Cancel
        </button>
      </span>
    </div>
  </form>
</div></div>
                      <pre>{{ debug["uiselect"] | json }}</pre>
                      <p><p>UI-Select control is implemented via <a href="https://github.com/angular-ui/ui-select">AngularJS-native version of Select2 and Selectize</a>.  
You should include additional <code>select.min.js</code> and <code>select.min.css</code>:</p>
<pre><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.min.js&quot;&gt;&lt;/script&gt;

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;</code></pre><p>Then add <code>ui.select</code> as module dependency:</p>
<pre class="prettyprint">var app = angular.module(&quot;app&quot;, [&quot;xeditable&quot;, &quot;ui.select&quot;]);</pre><p>And finally set <code>editable-ui-select</code> attribute pointing to model and <code>editable-ui-select-match</code> to the match criteria
and <code>editable-ui-select-choices</code> to the choices.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('UiSelectCtrl', function($scope) {
  $scope.user = {
    state: 'Arizona'
  };

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
$scope.$watch("user", function(v) { $scope.$parent.debug["uiselect"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;UiSelectCtrl&quot;&gt;
  &lt;form data-editable-form name=&quot;uiSelectForm&quot;&gt;
    &lt;div editable-ui-select=&quot;user.state&quot; data-e-form=&quot;uiSelectForm&quot; data-e-name=&quot;state&quot; name=&quot;state&quot; theme=&quot;bootstrap&quot; data-e-ng-model=&quot;user.state&quot; data-e-style=&quot;min-width:300px;&quot;&gt;
      {{user.state}}
      &lt;editable-ui-select-match placeholder=&quot;State&quot;&gt;
          {{$select.selected}}
      &lt;/editable-ui-select-match&gt;
      &lt;editable-ui-select-choices repeat=&quot;state in states | filter: $select.search track by $index&quot;&gt;
        {{state}}
      &lt;/editable-ui-select-choices&gt;
    &lt;/div&gt;
    &lt;br/&gt;
    &lt;div class=&quot;buttons&quot;&gt;
      &lt;!-- button to show form --&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;uiSelectForm.$show()&quot; ng-show=&quot;!uiSelectForm.$visible&quot;&gt;
        Edit
      &lt;/button&gt;
      &lt;!-- buttons to submit / cancel form --&gt;
      &lt;span ng-show=&quot;uiSelectForm.$visible&quot;&gt;
        &lt;br/&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; ng-disabled=&quot;uiSelectForm.$waiting&quot;&gt;
          Save
        &lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-disabled=&quot;uiSelectForm.$waiting&quot; ng-click=&quot;uiSelectForm.$cancel()&quot;&gt;
          Cancel
        &lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('UiSelectCtrl', function($scope) {
  $scope.user = {
    state: 'Arizona'
  };

  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
});</pre>
                    </section>
                    <section id="ngtags">
                      <h1>ngTagsInput</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="NgTagsCtrl">
  <form data-editable-form name="ngTagsForm">
    <div editable-tags-input="user.tags" data-e-form="ngTagsForm" data-e-name="tags" name="tags" id="tags" data-e-ng-model="user.tags">
      {{user.tags}}
        <editable-tags-input-auto-complete source="loadTags($query)"></editable-tags-input-auto-complete>
    </div>
    <br/>
    <div class="buttons">
      <!-- button to show form -->
      <button type="button" class="btn btn-default" ng-click="ngTagsForm.$show()" ng-show="!ngTagsForm.$visible">
        Edit
      </button>
      <!-- buttons to submit / cancel form -->
      <span ng-show="ngTagsForm.$visible">
        <br/>
        <button type="submit" class="btn btn-primary" ng-disabled="ngTagsForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="ngTagsForm.$waiting" ng-click="ngTagsForm.$cancel()">
          Cancel
        </button>
      </span>
    </div>
  </form>
</div></div>
                      <pre>{{ debug["ngtags"] | json }}</pre>
                      <p><p>ngTagsInput control is implemented via <a href="http://mbenford.github.io/ngTagsInput/">Tags input directive for AngularJS </a>.  
You should include additional <code>ng-tags-input.min.js</code> and <code>ng-tags-input.min.css</code> and <code>ng-tags-input.bootstrap.min.css</code> (if using bootstrap):</p>
<pre><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js&quot;&gt;&lt;/script&gt;

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;</code></pre><p>Then add <code>ngTagsInput</code> as module dependency:</p>
<pre class="prettyprint">var app = angular.module(&quot;app&quot;, [&quot;xeditable&quot;, &quot;ngTagsInput&quot;]);</pre><p>And finally set <code>editable-tags-input</code> attribute pointing to model and add <code>editable-tags-input-auto-complete</code> tag to do the auto complete criteria.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('NgTagsCtrl', function($scope, $http) {
  $scope.user = {
    tags: [
      { text: 'Tag1' },
      { text: 'Tag2' },
      { text: 'Tag3' }
    ],
  };

  $scope.loadTags = function(query) {
    return $http.get('/tags?query=' + query);
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["ngtags"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;NgTagsCtrl&quot;&gt;
  &lt;form data-editable-form name=&quot;ngTagsForm&quot;&gt;
    &lt;div editable-tags-input=&quot;user.tags&quot; data-e-form=&quot;ngTagsForm&quot; data-e-name=&quot;tags&quot; name=&quot;tags&quot; id=&quot;tags&quot; data-e-ng-model=&quot;user.tags&quot;&gt;
      {{user.tags}}
        &lt;editable-tags-input-auto-complete source=&quot;loadTags($query)&quot;&gt;&lt;/editable-tags-input-auto-complete&gt;
    &lt;/div&gt;
    &lt;br/&gt;
    &lt;div class=&quot;buttons&quot;&gt;
      &lt;!-- button to show form --&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;ngTagsForm.$show()&quot; ng-show=&quot;!ngTagsForm.$visible&quot;&gt;
        Edit
      &lt;/button&gt;
      &lt;!-- buttons to submit / cancel form --&gt;
      &lt;span ng-show=&quot;ngTagsForm.$visible&quot;&gt;
        &lt;br/&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; ng-disabled=&quot;ngTagsForm.$waiting&quot;&gt;
          Save
        &lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-disabled=&quot;ngTagsForm.$waiting&quot; ng-click=&quot;ngTagsForm.$cancel()&quot;&gt;
          Cancel
        &lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('NgTagsCtrl', function($scope, $http) {
  $scope.user = {
    tags: [
      { text: 'Tag1' },
      { text: 'Tag2' },
      { text: 'Tag3' }
    ],
  };

  $scope.loadTags = function(query) {
    return $http.get('/tags?query=' + query);
  };
});</pre>
                    </section>
                    <section id="text-customize">
                      <h1>Customize input</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19050/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="TextCustomizeCtrl" id="TextCustomizeCtrl">
  <a href="#" editable-text="user.name"
              e-style="color: green"
              e-required
              e-placeholder="Enter name"
              e-formclass="class1 class2"
              e-inputgroupleft="left"
              e-inputgroupright="right">
    {{ (user.name || 'empty') | uppercase }}
  </a>
</div></div>
                      <pre>{{ debug["text-customize"] | json }}</pre>
                      <p><p>To define attributes for input (e.g. <code>style</code> or <code>placeholder</code>) you can define them
on the original element with <code>e-*</code> prefix (e.g. <code>e-style</code> or <code>e-placeholder</code>).<br>When input will appear these attributes will be transferred to it.<br>To customize the classes on the form the input is in, add <code>e-formclass</code> with the classes to be added.<br>To use simple bootstrap input groups add either <code>e-inputgroupleft</code> or <code>e-inputgroupright</code> with the text value you want to append.  </p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('TextCustomizeCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["text-customize"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;TextCustomizeCtrl&quot; id=&quot;TextCustomizeCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot;
              e-style=&quot;color: green&quot;
              e-required
              e-placeholder=&quot;Enter name&quot;
              e-formclass=&quot;class1 class2&quot;
              e-inputgroupleft=&quot;left&quot;
              e-inputgroupright=&quot;right&quot;&gt;
    {{ (user.name || 'empty') | uppercase }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('TextCustomizeCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});</pre>
                    </section>
                    <section id="text-btn">
                      <h1>Trigger manually</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19051/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="TextBtnCtrl" id="TextBtnCtrl">
  <span editable-text="user.name" e-form="textBtnForm">
    {{ user.name || 'empty' }}
  </span>
  <button class="btn btn-default" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
    edit
  </button>
</div></div>
                      <pre>{{ debug["text-btn"] | json }}</pre>
                      <p><p>To trigger edit-in-place by external button you should define <code>e-form</code> attribute.<br>Value of it is the name of variable to be created in scope that allows you to show / hide editor manually.<br>To trigger edit-in-place with <code>e-form</code> and no button for a single element, add <code>e-clickable=&quot;true&quot;</code>.  
This will allow you to have custom form names in an ng-repeat for single elements.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('TextBtnCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["text-btn"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;TextBtnCtrl&quot; id=&quot;TextBtnCtrl&quot;&gt;
  &lt;span editable-text=&quot;user.name&quot; e-form=&quot;textBtnForm&quot;&gt;
    {{ user.name || 'empty' }}
  &lt;/span&gt;
  &lt;button class=&quot;btn btn-default&quot; ng-click=&quot;textBtnForm.$show()&quot; ng-hide=&quot;textBtnForm.$visible&quot;&gt;
    edit
  &lt;/button&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('TextBtnCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});</pre>
                    </section>
                    <section id="select-nobuttons">
                      <h1>Hide buttons</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19052/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="SelectNobuttonsCtrl">
  <a href="#" editable-select="user.status" buttons="no" e-ng-options="s.value as s.text for s in statuses">
    {{ showStatus() }}
  </a>
</div></div>
                      <pre>{{ debug["select-nobuttons"] | json }}</pre>
                      <p><p>To hide <em>Ok</em> and <em>Cancel</em> buttons you may set <code>buttons=&quot;no&quot;</code> attribute.
New value will be saved automatically after change.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('SelectNobuttonsCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  };

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ];

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["select-nobuttons"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;SelectNobuttonsCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-select=&quot;user.status&quot; buttons=&quot;no&quot; e-ng-options=&quot;s.value as s.text for s in statuses&quot;&gt;
    {{ showStatus() }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('SelectNobuttonsCtrl', function($scope, $filter) {
  $scope.user = {
    status: 2
  };

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ];

  $scope.showStatus = function() {
    var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
    return ($scope.user.status &amp;&amp; selected.length) ? selected[0].text : 'Not set';
  };
});</pre>
                    </section>
                    <section id="select-multiple">
                      <h1>Select multiple</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19053/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="SelectMultipleCtrl">
  <a href="#" editable-select="user.status" e-multiple e-ng-options="s.value as s.text for s in statuses">
    {{ showStatus() }}
  </a>
</div></div>
                      <pre>{{ debug["select-multiple"] | json }}</pre>
                      <p><p>Just define <code>e-multiple</code> attribute that will be transfered to select as <code>multiple</code>.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('SelectMultipleCtrl', function($scope, $filter) {
  $scope.user = {
    status: [2, 4]
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.showStatus = function() {
    var selected = [];
    angular.forEach($scope.statuses, function(s) { 
      if ($scope.user.status.indexOf(s.value) >= 0) {
        selected.push(s.text);
      }
    });
    return selected.length ? selected.join(', ') : 'Not set';
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["select-multiple"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;SelectMultipleCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-select=&quot;user.status&quot; e-multiple e-ng-options=&quot;s.value as s.text for s in statuses&quot;&gt;
    {{ showStatus() }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('SelectMultipleCtrl', function($scope, $filter) {
  $scope.user = {
    status: [2, 4]
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.showStatus = function() {
    var selected = [];
    angular.forEach($scope.statuses, function(s) { 
      if ($scope.user.status.indexOf(s.value) &gt;= 0) {
        selected.push(s.text);
      }
    });
    return selected.length ? selected.join(', ') : 'Not set';
  };
});</pre>
                    </section>
                    <section id="validate-local">
                      <h1>Validate local</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19054/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="ValidateLocalCtrl" id="ValidateLocalCtrl">
  <a href="#" editable-text="user.name" onbeforesave="checkName($data)">
    {{ user.name || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["validate-local"] | json }}</pre>
                      <p><p>Validation is performed via <code>onbeforesave</code> attribute pointing to validation method.
Value is available as <code>$data</code> parameter. If method returns <strong>string</strong> - validation failed
and string shown as error message.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('ValidateLocalCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };

  $scope.checkName = function(data) {
    if (data !== 'awesome') {
      return "Username should be `awesome`";
    }
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["validate-local"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;ValidateLocalCtrl&quot; id=&quot;ValidateLocalCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; onbeforesave=&quot;checkName($data)&quot;&gt;
    {{ user.name || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('ValidateLocalCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };

  $scope.checkName = function(data) {
    if (data !== 'awesome') {
      return &quot;Username should be `awesome`&quot;;
    }
  };
});</pre>
                    </section>
                    <section id="validate-remote">
                      <h1>Validate remote</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19055/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="ValidateRemoteCtrl" id="ValidateRemoteCtrl">
  <a href="#" editable-text="user.name" onbeforesave="checkName($data)">
    {{ user.name || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["validate-remote"] | json }}</pre>
                      <p><p>You can perform remote validation e.g. checking username in db.
For that define validation method returning <code>$q</code> <strong>promise</strong>. 
If promise resolves to <strong>string</strong> validation failed.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('ValidateRemoteCtrl', function($scope, $http, $q) {
  $scope.user = {
    name: 'awesome user'
  };

  $scope.checkName = function(data) {
    var d = $q.defer();
    $http.post('/checkName', {value: data}).success(function(res) {
      res = res || {};
      if(res.status === 'ok') { // {status: "ok"}
        d.resolve()
      } else { // {status: "error", msg: "Username should be `awesome`!"}
        d.resolve(res.msg)
      }
    }).error(function(e){
      d.reject('Server error!');
    });
    return d.promise;
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["validate-remote"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;ValidateRemoteCtrl&quot; id=&quot;ValidateRemoteCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; onbeforesave=&quot;checkName($data)&quot;&gt;
    {{ user.name || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('ValidateRemoteCtrl', function($scope, $http, $q) {
  $scope.user = {
    name: 'awesome user'
  };

  $scope.checkName = function(data) {
    var d = $q.defer();
    $http.post('/checkName', {value: data}).success(function(res) {
      res = res || {};
      if(res.status === 'ok') { // {status: &quot;ok&quot;}
        d.resolve()
      } else { // {status: &quot;error&quot;, msg: &quot;Username should be `awesome`!&quot;}
        d.resolve(res.msg)
      }
    }).error(function(e){
      d.reject('Server error!');
    });
    return d.promise;
  };
});</pre>
                    </section>
                    <section id="edit-disabled">
                      <h1>Disable editing</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="EditDisabledCtrl">
  <a href="#" editable-text="user.name" edit-disabled="{{user && user.name == 'awesome user'}}">{{user.name || 'empty' }}</a>
</div></div>
                      <pre>{{ debug["edit-disabled"] | json }}</pre>
                      <p><p>To disable an element from being editable, just add the <code>edit-disabled=&quot;true&quot;</code> attribute.  Additionally, you can disable all elements at a global level by setting <code>editableOptions.isDisabled=true</code>.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('EditDisabledCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["edit-disabled"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;EditDisabledCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; edit-disabled=&quot;{{user &amp;&amp; user.name == 'awesome user'}}&quot;&gt;{{user.name || 'empty' }}&lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('EditDisabledCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});</pre>
                    </section>
                    <section id="editable-popover">
                      <h1>Editable Popover</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="EditPopoverCtrl">
  <div class="popover-wrapper">
    <a href="#" editable-text="user.name">{{user.name || 'empty' }}</a>
  </div>
</div></div>
                      <pre>{{ debug["editable-popover"] | json }}</pre>
                      <p><p>To make a single editable field display in a pure css popover, wrap the editable in <code>&lt;div class=&quot;popover-wrapper&quot;&gt;</code>.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('EditPopoverCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["editable-popover"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;EditPopoverCtrl&quot;&gt;
  &lt;div class=&quot;popover-wrapper&quot;&gt;
    &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot;&gt;{{user.name || 'empty' }}&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('EditPopoverCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});</pre>
                    </section>
                    <section id="uipopover">
                      <h1>Editable ui-bootstrap Popover</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="UiPopoverCtrl" id="UiPopoverCtrl">
  <div class="ui-popover-wrapper">
    <a href="#"
       id="simpleText"
       editable-text="user.name"
       e-label="User Name"
       uib-popover-template="'popover.html'"
       popover-is-open="popoverIsOpen"
       popover-append-to-body="true"
       onshow="popoverIsOpen = !popoverIsOpen"
       onhide="popoverIsOpen = !popoverIsOpen"
       popover-class="increase-popover-width"
       popover="true">{{ user.name || 'empty' }}</a>
  </div>
</div></div>
                      <pre>{{ debug["uipopover"] | json }}</pre>
                      <p><p>To make a single element editable via <code>ui-boostrap popover</code> do the following:</p>
<ul>
<li>Wrap the editable in <code>&lt;div class=&quot;ui-popover-wrapper&quot;&gt;</code>.</li>
<li>Put the following attributes on the editable element:<ul>
<li><code>uib-popover-template=&quot;&#39;popover.html&#39;&quot;</code> - The template is generated when the <code>popover</code> attribute is set to `true&#39;</li>
<li><code>popover-is-open=&quot;popoverIsOpen&quot;</code> - Controls when the popover is opened</li>
<li><code>onshow=&quot;popoverIsOpen = !popoverIsOpen&quot;</code> - Opens the popover when the editable form is shown</li>
<li><code>onhide=&quot;popoverIsOpen = !popoverIsOpen&quot;</code> - Closes the popover when the editable form is closed</li>
<li><code>popover=&quot;true&quot;</code> - Tells the editable directive that this element is to be displayed in the ui-bootstrap popover</li>
<li><code>popover-class=&quot;increase-popover-width&quot;</code> - Add this attribute to change the width of the popover</li>
</ul>
</li>
</ul>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('UiPopoverCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user',
      location: 'location 1'
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["uipopover"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;UiPopoverCtrl&quot; id=&quot;UiPopoverCtrl&quot;&gt;
  &lt;div class=&quot;ui-popover-wrapper&quot;&gt;
    &lt;a href=&quot;#&quot;
       id=&quot;simpleText&quot;
       editable-text=&quot;user.name&quot;
       e-label=&quot;User Name&quot;
       uib-popover-template=&quot;'popover.html'&quot;
       popover-is-open=&quot;popoverIsOpen&quot;
       popover-append-to-body=&quot;true&quot;
       onshow=&quot;popoverIsOpen = !popoverIsOpen&quot;
       onhide=&quot;popoverIsOpen = !popoverIsOpen&quot;
       popover-class=&quot;increase-popover-width&quot;
       popover=&quot;true&quot;&gt;{{ user.name || 'empty' }}&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('UiPopoverCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user',
      location: 'location 1'
  };
});</pre>
                    </section>
                    <section id="e-single">
                      <h1>Single editable in a form</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3>
                      <div class="well line-example"><div ng-controller="ESingleCtrl" id="ESingleCtrl">
  <form>
    <a href="#" editable-text="user.name" e-single>{{ user.name || 'empty' }}</a>
  </form>
</div></div>
                      <pre>{{ debug["e-single"] | json }}</pre>
                      <p><p>Add <code>e-single</code> attribute when you want a single item to be clickable inside of a form.<br>It ignores the outer form.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('ESingleCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
$scope.$watch("user", function(v) { $scope.$parent.debug["e-single"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;ESingleCtrl&quot; id=&quot;ESingleCtrl&quot;&gt;
  &lt;form&gt;
    &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; e-single&gt;{{ user.name || 'empty' }}&lt;/a&gt;
  &lt;/form&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('ESingleCtrl', function($scope) {
  $scope.user = {
    name: 'awesome user'
  };  
});</pre>
                    </section>
                    <section id="onbeforesave">
                      <h1>Submit via onbeforesave</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19056/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="OnbeforesaveCtrl" id="OnbeforesaveCtrl">
  <a href="#" editable-text="user.name" onbeforesave="updateUser($data)">
    {{ user.name || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["onbeforesave"] | json }}</pre>
                      <p><p>One way to submit data on server is to define <code>onbeforesave</code> attribute pointing to some method of scope.
Useful when you need to send data on server first and only then update local model (e.g. <code>$scope.user</code>).
New value can be passed as <code>$data</code> parameter (e.g. <code>&lt;a ... onbeforesave=&quot;updateUser($data)&quot;&gt;</code>).</p>
<p>The main thing is that local model will be updated only if method returns <code>true</code> or <code>undefined</code> (or promise resolved to <code>true/undefined</code>). Commonly there are 3 cases depending on result type:</p>
<ul>
<li><code>true</code> or <code>undefined</code>: 
Success. Local model will be updated automatically and form will close.</li>
<li><code>false</code>: 
Success. But local model will <strong>not</strong> be updated and form will close. Useful when you want to update local model manually (e.g. server changed values).</li>
<li><code>string</code>: 
Error. Local model will <strong>not</strong> be updated, form will <strong>not</strong> close, string will be shown as error message.
Useful for validation and processing errors.</li>
</ul>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('OnbeforesaveCtrl', function($scope, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user'
  };

  $scope.updateUser = function(data) {
    return $http.post('/updateUser', {id: $scope.user.id, name: data});
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["onbeforesave"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;OnbeforesaveCtrl&quot; id=&quot;OnbeforesaveCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; onbeforesave=&quot;updateUser($data)&quot;&gt;
    {{ user.name || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('OnbeforesaveCtrl', function($scope, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user'
  };

  $scope.updateUser = function(data) {
    return $http.post('/updateUser', {id: $scope.user.id, name: data});
  };
});</pre>
                    </section>
                    <section id="onaftersave">
                      <h1>Submit via onaftersave</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19057/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="OnaftersaveCtrl" id="OnaftersaveCtrl">
  <a href="#" editable-text="user.name" onaftersave="updateUser()">
    {{ user.name || 'empty' }}
  </a>
</div></div>
                      <pre>{{ debug["onaftersave"] | json }}</pre>
                      <p><p>Another way to submit data on server is to define <code>onaftersave</code> attribute pointing to some method of scope.
Useful when you need to update local model first and only then send it to server.
There are no input parameters as data already in local model.</p>
<p>The result type of this method can be following:</p>
<ul>
<li>anything except <code>string</code>: success, form will be closed</li>
<li><code>string</code>: error, form will <strong>not</strong> close, string will be shown as error message</li>
</ul>
<p>Note that you can use both <code>onbeforesave</code> for validation and <code>onaftersave</code> for saving data.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('OnaftersaveCtrl', function($scope, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user'
  };

  $scope.updateUser = function() {
    return $http.post('/updateUser', $scope.user);
  };
$scope.$watch("user", function(v) { $scope.$parent.debug["onaftersave"]=v; }); });</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;OnaftersaveCtrl&quot; id=&quot;OnaftersaveCtrl&quot;&gt;
  &lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; onaftersave=&quot;updateUser()&quot;&gt;
    {{ user.name || 'empty' }}
  &lt;/a&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('OnaftersaveCtrl', function($scope, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user'
  };

  $scope.updateUser = function() {
    return $http.post('/updateUser', $scope.user);
  };
});</pre>
                    </section>
                    <section id="editable-form">
                      <h1>Editable form</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19058/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="EditableFormCtrl" id="EditableFormCtrl">
  <form editable-form name="editableForm" onaftersave="saveUser()">
    <div>
      <!-- editable username (text with validation) -->
      <span class="title">User name: </span>
      <span editable-text="user.name" e-name="name" onbeforesave="checkName($data)" e-required>{{ user.name || 'empty' }}</span>
    </div> 

    <div>
      <!-- editable status (select-local) -->
      <span class="title">Status: </span>
      <span editable-select="user.status" e-name="status" e-ng-options="s.value as s.text for s in statuses">
        {{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
      </span>
    </div>  

    <div>
      <!-- editable group (select-remote) -->
      <span class="title">Group: </span>
      <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
        {{ showGroup() }}
      </span>
    </div>

    <div class="buttons">
      <!-- button to show form -->
      <button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
        Edit
      </button>
      <!-- buttons to submit / cancel form -->
      <span ng-show="editableForm.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
          Save
        </button>
        <button type="button" class="btn btn-default" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">
          Cancel
        </button>
      </span>
    </div>
  </form>  
</div></div>
                      <p><p>To show several editable elements together and submit at once you should wrap them into <code>&lt;form editable-form name=&quot;myform&quot; ...&gt;</code> tag. The <code>name</code> attribute of form will create variable in scope (normal angular behavior) and <code>editable-form</code> attribute will add a few methods to that variable: </p>
<ul>
<li>$show()</li>
<li>$cancel()</li>
<li>$visible</li>
<li>$waiting</li>
</ul>
<p>Use it to toggle editable state of form. For example, you can call <code>myform.$show()</code>.</p>
<p>Editable form supports 3 additional attributes: </p>
<ul>
<li><strong>onshow</strong>: called when form is shown</li>
<li><strong>onbeforesave</strong>: called on submit before local models update</li>
<li><strong>onaftersave</strong>: called on submit after local models update</li>
</ul>
<p>They work nearly the same as for individual editable elements. Use it instead of <code>ng-submit / submit</code> to get more control over saving process. </p>
<p>When you submit editable form it performs following steps:</p>
<ol>
<li>call child&#39;s <code>onbeforesave</code></li>
<li>call form&#39;s <code>onbeforesave</code></li>
<li>write data to local model (e.g. <code>$scope.user</code>)</li>
<li>call form&#39;s <code>onaftersave</code></li>
<li>call child&#39;s <code>onaftersave</code></li>
</ol>
<p>Any <code>onbeforesave / onaftersave</code> can be omited so in simplest case you will just write data to local model.</p>
<p>But in more complex case it becomes usefull:</p>
<p>If you need <strong>validation of individual editable elements</strong> then you should define <code>onbeforesave</code> on particular editable element.<br>The result of child&#39;s <code>onbeforesave</code> is important for next step:</p>
<ul>
<li><code>string</code>: submit will be cancelled, form will stay opened, string will be shown as error message</li>
<li><code>not string</code>: submit will be continued</li>
</ul>
<p>If you need to <strong>send data on server <em>before</em> writing to local model</strong> then you should define form&#39;s <code>onbeforesave</code>.   
The result of form&#39;s <code>onbeforesave</code> is important for next step:</p>
<ul>
<li><code>true</code> or <code>undefined</code>: local model will be updated and form will call <code>onaftersave</code> </li>
<li><code>false</code>: local model <strong>will not be updated</strong> and form will just close (e.g. you update local model yourself)</li>
<li><code>string</code>: local model <strong>will not be updated</strong> and <strong>form will not close</strong> (e.g. server error)</li>
</ul>
<p>If you need to <strong>send data on server <em>after</em> writing to local model</strong> then you should define form&#39;s <code>onaftersave</code>.  
The result of form&#39;s <code>onaftersave</code> is also important for next step: </p>
<ul>
<li><code>string</code>: form will not close (e.g. server error)</li>
<li><code>not string</code>: form will be closed</li>
</ul>
<p>Commonly you should define <code>onbeforesave</code> for child elements to perform validation and <code>onaftersave</code> for whole form to send data on server.</p>
<p>Note:  <code>e-required</code> will not work since HTML5 validation only works if submitting a form with a submit button and <code>editable-form</code> submits via a script.</p>
<p>Please have a look at examples.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('EditableFormCtrl', function($scope, $filter, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user',
    status: 2,
    group: 4,
    groupName: 'admin'
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function() {
    if($scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: $scope.user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return $scope.user.groupName;
    }
  };

  $scope.checkName = function(data) {
    if (data !== 'awesome' && data !== 'error') {
      return "Username should be `awesome` or `error`";
    }
  };

  $scope.saveUser = function() {
    // $scope.user already updated!
    return $http.post('/saveUser', $scope.user).error(function(err) {
      if(err.field && err.msg) {
        // err like {field: "name", msg: "Server-side error for this username!"} 
        $scope.editableForm.$setError(err.field, err.msg);
      } else { 
        // unknown error
        $scope.editableForm.$setError('name', 'Unknown error!');
      }
    });
  };
});</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;EditableFormCtrl&quot; id=&quot;EditableFormCtrl&quot;&gt;
  &lt;form editable-form name=&quot;editableForm&quot; onaftersave=&quot;saveUser()&quot;&gt;
    &lt;div&gt;
      &lt;!-- editable username (text with validation) --&gt;
      &lt;span class=&quot;title&quot;&gt;User name: &lt;/span&gt;
      &lt;span editable-text=&quot;user.name&quot; e-name=&quot;name&quot; onbeforesave=&quot;checkName($data)&quot; e-required&gt;{{ user.name || 'empty' }}&lt;/span&gt;
    &lt;/div&gt; 

    &lt;div&gt;
      &lt;!-- editable status (select-local) --&gt;
      &lt;span class=&quot;title&quot;&gt;Status: &lt;/span&gt;
      &lt;span editable-select=&quot;user.status&quot; e-name=&quot;status&quot; e-ng-options=&quot;s.value as s.text for s in statuses&quot;&gt;
        {{ (statuses | filter:{value: user.status})[0].text || 'Not set' }}
      &lt;/span&gt;
    &lt;/div&gt;  

    &lt;div&gt;
      &lt;!-- editable group (select-remote) --&gt;
      &lt;span class=&quot;title&quot;&gt;Group: &lt;/span&gt;
      &lt;span editable-select=&quot;user.group&quot; e-name=&quot;group&quot; onshow=&quot;loadGroups()&quot; e-ng-options=&quot;g.id as g.text for g in groups&quot;&gt;
        {{ showGroup() }}
      &lt;/span&gt;
    &lt;/div&gt;

    &lt;div class=&quot;buttons&quot;&gt;
      &lt;!-- button to show form --&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;editableForm.$show()&quot; ng-show=&quot;!editableForm.$visible&quot;&gt;
        Edit
      &lt;/button&gt;
      &lt;!-- buttons to submit / cancel form --&gt;
      &lt;span ng-show=&quot;editableForm.$visible&quot;&gt;
        &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; ng-disabled=&quot;editableForm.$waiting&quot;&gt;
          Save
        &lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-disabled=&quot;editableForm.$waiting&quot; ng-click=&quot;editableForm.$cancel()&quot;&gt;
          Cancel
        &lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;  
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('EditableFormCtrl', function($scope, $filter, $http) {
  $scope.user = {
    id: 1,
    name: 'awesome user',
    status: 2,
    group: 4,
    groupName: 'admin'
  }; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function() {
    if($scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: $scope.user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return $scope.user.groupName;
    }
  };

  $scope.checkName = function(data) {
    if (data !== 'awesome' &amp;&amp; data !== 'error') {
      return &quot;Username should be `awesome` or `error`&quot;;
    }
  };

  $scope.saveUser = function() {
    // $scope.user already updated!
    return $http.post('/saveUser', $scope.user).error(function(err) {
      if(err.field &amp;&amp; err.msg) {
        // err like {field: &quot;name&quot;, msg: &quot;Server-side error for this username!&quot;} 
        $scope.editableForm.$setError(err.field, err.msg);
      } else { 
        // unknown error
        $scope.editableForm.$setError('name', 'Unknown error!');
      }
    });
  };
});</pre>
                    </section>
                    <section id="editable-row">
                      <h1>Editable row</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19059/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="EditableRowCtrl">
  <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold">
      <td style="width:35%">Name</td>
      <td style="width:20%">Status</td>
      <td style="width:20%">Group</td>
      <td style="width:25%">Edit</td>
    </tr>
    <tr ng-repeat="user in users">
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="checkName($data, user.id)">
          {{ user.name || 'empty' }}
        </span>
      </td>
      <td>
        <!-- editable status (select-local) -->
        <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
          {{ showStatus(user) }}
        </span>
      </td>
      <td>
        <!-- editable group (select-remote) -->
        <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in groups">
          {{ showGroup(user) }}
        </span>
      </td>
      <td style="white-space: nowrap">
        <!-- form -->
        <form editable-form name="rowform" onbeforesave="saveUser($data, user.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>
        <div class="buttons" ng-show="!rowform.$visible">
          <button type="button" class="btn btn-primary" ng-click="rowform.$show()">edit</button>
          <button type="button" class="btn btn-danger" ng-click="removeUser($index)">del</button>
        </div>  
      </td>
    </tr>
  </table>

  <button type="button" class="btn btn-default" ng-click="addUser()">Add row</button>
</div></div>
                      <p><p>To create editable row in table you should place editable elements in cells with <code>e-form</code> attribute pointing to form&#39;s name. The form itself can appear later (e.g. in last column) but it will work. Don&#39;t forget to add 
<code>editable-form</code> attribute to the form. The form behavior is absolutely the same as described in
<a href="#editable-form">Editable form section</a></p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('EditableRowCtrl', function($scope, $filter, $http) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  $scope.saveUser = function(data, id) {
    //$scope.user not updated yet
    angular.extend(data, {id: id});
    return $http.post('/saveUser', data);
  };

  // remove user
  $scope.removeUser = function(index) {
    $scope.users.splice(index, 1);
  };

  // add user
  $scope.addUser = function() {
    $scope.inserted = {
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null 
    };
    $scope.users.push($scope.inserted);
  };
});</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;EditableRowCtrl&quot;&gt;
  &lt;table class=&quot;table table-bordered table-hover table-condensed&quot;&gt;
    &lt;tr style=&quot;font-weight: bold&quot;&gt;
      &lt;td style=&quot;width:35%&quot;&gt;Name&lt;/td&gt;
      &lt;td style=&quot;width:20%&quot;&gt;Status&lt;/td&gt;
      &lt;td style=&quot;width:20%&quot;&gt;Group&lt;/td&gt;
      &lt;td style=&quot;width:25%&quot;&gt;Edit&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr ng-repeat=&quot;user in users&quot;&gt;
      &lt;td&gt;
        &lt;!-- editable username (text with validation) --&gt;
        &lt;span editable-text=&quot;user.name&quot; e-name=&quot;name&quot; e-form=&quot;rowform&quot; onbeforesave=&quot;checkName($data, user.id)&quot;&gt;
          {{ user.name || 'empty' }}
        &lt;/span&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;!-- editable status (select-local) --&gt;
        &lt;span editable-select=&quot;user.status&quot; e-name=&quot;status&quot; e-form=&quot;rowform&quot; e-ng-options=&quot;s.value as s.text for s in statuses&quot;&gt;
          {{ showStatus(user) }}
        &lt;/span&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;!-- editable group (select-remote) --&gt;
        &lt;span editable-select=&quot;user.group&quot; e-name=&quot;group&quot; onshow=&quot;loadGroups()&quot; e-form=&quot;rowform&quot; e-ng-options=&quot;g.id as g.text for g in groups&quot;&gt;
          {{ showGroup(user) }}
        &lt;/span&gt;
      &lt;/td&gt;
      &lt;td style=&quot;white-space: nowrap&quot;&gt;
        &lt;!-- form --&gt;
        &lt;form editable-form name=&quot;rowform&quot; onbeforesave=&quot;saveUser($data, user.id)&quot; ng-show=&quot;rowform.$visible&quot; class=&quot;form-buttons form-inline&quot; shown=&quot;inserted == user&quot;&gt;
          &lt;button type=&quot;submit&quot; ng-disabled=&quot;rowform.$waiting&quot; class=&quot;btn btn-primary&quot;&gt;
            save
          &lt;/button&gt;
          &lt;button type=&quot;button&quot; ng-disabled=&quot;rowform.$waiting&quot; ng-click=&quot;rowform.$cancel()&quot; class=&quot;btn btn-default&quot;&gt;
            cancel
          &lt;/button&gt;
        &lt;/form&gt;
        &lt;div class=&quot;buttons&quot; ng-show=&quot;!rowform.$visible&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; ng-click=&quot;rowform.$show()&quot;&gt;edit&lt;/button&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; ng-click=&quot;removeUser($index)&quot;&gt;del&lt;/button&gt;
        &lt;/div&gt;  
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;

  &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-click=&quot;addUser()&quot;&gt;Add row&lt;/button&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('EditableRowCtrl', function($scope, $filter, $http) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group &amp;&amp; $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 &amp;&amp; data !== 'awesome') {
      return &quot;Username 2 should be `awesome`&quot;;
    }
  };

  $scope.saveUser = function(data, id) {
    //$scope.user not updated yet
    angular.extend(data, {id: id});
    return $http.post('/saveUser', data);
  };

  // remove user
  $scope.removeUser = function(index) {
    $scope.users.splice(index, 1);
  };

  // add user
  $scope.addUser = function() {
    $scope.inserted = {
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null 
    };
    $scope.users.push($scope.inserted);
  };
});</pre>
                    </section>
                    <section id="editable-column">
                      <h1>Editable column</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19060/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="EditableColumnCtrl">
  <table class="table table-bordered table-hover table-condensed">
    <tr style="font-weight: bold; white-space: nowrap">

      <!-- username header -->
      <td style="width:40%">
        Name
        <form editable-form name="nameform" onaftersave="saveColumn('name')" ng-show="nameform.$visible">
          <button type="submit" ng-disabled="nameform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="nameform.$waiting" ng-click="nameform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>  
        <button class="btn btn-default" ng-show="!nameform.$visible" ng-click="nameform.$show()">
          edit
        </button>
      </td>

      <!-- status header -->
      <td style="width:30%">
        Status
        <form editable-form name="statusform" onaftersave="saveColumn('status')" ng-show="statusform.$visible">
          <button type="submit" ng-disabled="statusform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="statusform.$waiting" ng-click="statusform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>  
        <button class="btn btn-default" ng-show="!statusform.$visible" ng-click="statusform.$show()">
          edit
        </button>
      </td>

      <!-- group header -->
      <td style="width:30%">
        Group
        <form editable-form name="groupform" onaftersave="saveColumn('group')" ng-show="groupform.$visible">
          <button type="submit" ng-disabled="groupform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="groupform.$waiting" ng-click="groupform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>  
        <button class="btn btn-default" ng-show="!groupform.$visible" ng-click="groupform.$show()">
          edit
        </button>
      </td>
    </tr>

    <tr ng-repeat="user in users">
      <td>
        <!-- editable username (text with validation) -->
        <span editable-text="user.name" e-name="name" e-form="nameform" onbeforesave="checkName($data)">
          {{ user.name || 'empty' }}
        </span>
      </td>

      <td>
        <!-- editable status (select-local) -->
        <span editable-select="user.status" e-name="status" e-form="statusform" e-ng-options="s.value as s.text for s in statuses">
          {{ showStatus(user) }}
        </span>
      </td>

      <td>
        <!-- editable group (select-remote) -->
        <span editable-select="user.group" e-name="group" onshow="loadGroups()" e-form="groupform" e-ng-options="g.id as g.text for g in groups">
          {{ showGroup(user) }}
        </span>
      </td>
    </tr>
  </table>
</div></div>
                      <p><p>To create editable column in table you should place editable elements in cells with <code>e-form</code> attribute pointing to form&#39;s name. The form itself can appear in column header or footer. The form behavior is absolutely the same as described in
<a href="#editable-form">Editable form section</a></p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('EditableColumnCtrl', function($scope, $filter, $http, $q) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data) {
    if (data !== 'awesome') {
      return "Username should be `awesome`";
    }
  };

  $scope.saveColumn = function(column) {
    var results = [];
    angular.forEach($scope.users, function(user) {
      results.push($http.post('/saveColumn', {column: column, value: user[column], id: user.id}));
    })
    return $q.all(results);
  };

});</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;EditableColumnCtrl&quot;&gt;
  &lt;table class=&quot;table table-bordered table-hover table-condensed&quot;&gt;
    &lt;tr style=&quot;font-weight: bold; white-space: nowrap&quot;&gt;

      &lt;!-- username header --&gt;
      &lt;td style=&quot;width:40%&quot;&gt;
        Name
        &lt;form editable-form name=&quot;nameform&quot; onaftersave=&quot;saveColumn('name')&quot; ng-show=&quot;nameform.$visible&quot;&gt;
          &lt;button type=&quot;submit&quot; ng-disabled=&quot;nameform.$waiting&quot; class=&quot;btn btn-primary&quot;&gt;
            save
          &lt;/button&gt;
          &lt;button type=&quot;button&quot; ng-disabled=&quot;nameform.$waiting&quot; ng-click=&quot;nameform.$cancel()&quot; class=&quot;btn btn-default&quot;&gt;
            cancel
          &lt;/button&gt;
        &lt;/form&gt;  
        &lt;button class=&quot;btn btn-default&quot; ng-show=&quot;!nameform.$visible&quot; ng-click=&quot;nameform.$show()&quot;&gt;
          edit
        &lt;/button&gt;
      &lt;/td&gt;

      &lt;!-- status header --&gt;
      &lt;td style=&quot;width:30%&quot;&gt;
        Status
        &lt;form editable-form name=&quot;statusform&quot; onaftersave=&quot;saveColumn('status')&quot; ng-show=&quot;statusform.$visible&quot;&gt;
          &lt;button type=&quot;submit&quot; ng-disabled=&quot;statusform.$waiting&quot; class=&quot;btn btn-primary&quot;&gt;
            save
          &lt;/button&gt;
          &lt;button type=&quot;button&quot; ng-disabled=&quot;statusform.$waiting&quot; ng-click=&quot;statusform.$cancel()&quot; class=&quot;btn btn-default&quot;&gt;
            cancel
          &lt;/button&gt;
        &lt;/form&gt;  
        &lt;button class=&quot;btn btn-default&quot; ng-show=&quot;!statusform.$visible&quot; ng-click=&quot;statusform.$show()&quot;&gt;
          edit
        &lt;/button&gt;
      &lt;/td&gt;

      &lt;!-- group header --&gt;
      &lt;td style=&quot;width:30%&quot;&gt;
        Group
        &lt;form editable-form name=&quot;groupform&quot; onaftersave=&quot;saveColumn('group')&quot; ng-show=&quot;groupform.$visible&quot;&gt;
          &lt;button type=&quot;submit&quot; ng-disabled=&quot;groupform.$waiting&quot; class=&quot;btn btn-primary&quot;&gt;
            save
          &lt;/button&gt;
          &lt;button type=&quot;button&quot; ng-disabled=&quot;groupform.$waiting&quot; ng-click=&quot;groupform.$cancel()&quot; class=&quot;btn btn-default&quot;&gt;
            cancel
          &lt;/button&gt;
        &lt;/form&gt;  
        &lt;button class=&quot;btn btn-default&quot; ng-show=&quot;!groupform.$visible&quot; ng-click=&quot;groupform.$show()&quot;&gt;
          edit
        &lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr ng-repeat=&quot;user in users&quot;&gt;
      &lt;td&gt;
        &lt;!-- editable username (text with validation) --&gt;
        &lt;span editable-text=&quot;user.name&quot; e-name=&quot;name&quot; e-form=&quot;nameform&quot; onbeforesave=&quot;checkName($data)&quot;&gt;
          {{ user.name || 'empty' }}
        &lt;/span&gt;
      &lt;/td&gt;

      &lt;td&gt;
        &lt;!-- editable status (select-local) --&gt;
        &lt;span editable-select=&quot;user.status&quot; e-name=&quot;status&quot; e-form=&quot;statusform&quot; e-ng-options=&quot;s.value as s.text for s in statuses&quot;&gt;
          {{ showStatus(user) }}
        &lt;/span&gt;
      &lt;/td&gt;

      &lt;td&gt;
        &lt;!-- editable group (select-remote) --&gt;
        &lt;span editable-select=&quot;user.group&quot; e-name=&quot;group&quot; onshow=&quot;loadGroups()&quot; e-form=&quot;groupform&quot; e-ng-options=&quot;g.id as g.text for g in groups&quot;&gt;
          {{ showGroup(user) }}
        &lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('EditableColumnCtrl', function($scope, $filter, $http, $q) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group &amp;&amp; $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data) {
    if (data !== 'awesome') {
      return &quot;Username should be `awesome`&quot;;
    }
  };

  $scope.saveColumn = function(column) {
    var results = [];
    angular.forEach($scope.users, function(user) {
      results.push($http.post('/saveColumn', {column: column, value: user[column], id: user.id}));
    })
    return $q.all(results);
  };

});</pre>
                    </section>
                    <section id="editable-table">
                      <h1>Editable table</h1>
                      <!-- watch change of user to update rootScope for debugging-->
                      <h3>demo</h3><a href="http://jsfiddle.net/ckosloski/NfPcH/19061/" target="_blank" class="btn btn-info fiddle pull-right">jsFiddle</a>
                      <div class="well line-example"><div ng-controller="EditableTableCtrl">
  <form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">

    <!-- table -->
    <table class="table table-bordered table-hover table-condensed">
      <tr style="font-weight: bold">
        <td style="width:40%">Name</td>
        <td style="width:30%">Status</td>
        <td style="width:30%">Group</td>
        <td style="width:30%"><span ng-show="tableform.$visible">Action</span></td>
      </tr>
      <tr ng-repeat="user in users | filter:filterUser">
        <td>
          <!-- editable username (text with validation) -->
          <span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)">
            {{ user.name || 'empty' }}
          </span>
        </td>
        <td>
          <!-- editable status (select-local) -->
          <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses">
            {{ showStatus(user) }}
          </span>
        </td>
        <td>
          <!-- editable group (select-remote) -->
          <span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
            {{ showGroup(user) }}
          </span>
        </td>
        <td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">Del</button></td>
      </tr>
    </table>

    <!-- buttons -->
    <div class="btn-edit">
      <button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
        edit
      </button>
    </div>
    <div class="btn-form" ng-show="tableform.$visible">
      <button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
      <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
      <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
    </div> 
    
  </form>
</div></div>
                      <p><p>Just wrap the whole table into <code>&lt;form&gt;</code> tag with <code>editable-form</code> attribute.
Note that using <code>oncancel</code> hook allows you to revert all changes and put table into original state.</p>
</p>
                      <!--script(src=dir+'/controller.js')-->
                      <script>app.controller('EditableTableCtrl', function($scope, $filter, $http, $q) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group && $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 && data !== 'awesome') {
      return "Username 2 should be `awesome`";
    }
  };

  // filter users to show
  $scope.filterUser = function(user) {
    return user.isDeleted !== true;
  };

  // mark user as deleted
  $scope.deleteUser = function(id) {
    var filtered = $filter('filter')($scope.users, {id: id});
    if (filtered.length) {
      filtered[0].isDeleted = true;
    }
  };

  // add user
  $scope.addUser = function() {
    $scope.users.push({
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null,
      isNew: true
    });
  };

  // cancel all changes
  $scope.cancel = function() {
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];    
      // undelete
      if (user.isDeleted) {
        delete user.isDeleted;
      }
      // remove new 
      if (user.isNew) {
        $scope.users.splice(i, 1);
      }      
    };
  };

  // save edits
  $scope.saveTable = function() {
    var results = [];
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];
      // actually delete user
      if (user.isDeleted) {
        $scope.users.splice(i, 1);
      }
      // mark as not new 
      if (user.isNew) {
        user.isNew = false;
      }

      // send on server
      results.push($http.post('/saveUser', user));      
    }

    return $q.all(results);
  };
});</script>
                      <h3>html</h3>
                      <pre class="prettyprint ng-non-bindable">&lt;div ng-controller=&quot;EditableTableCtrl&quot;&gt;
  &lt;form editable-form name=&quot;tableform&quot; onaftersave=&quot;saveTable()&quot; oncancel=&quot;cancel()&quot;&gt;

    &lt;!-- table --&gt;
    &lt;table class=&quot;table table-bordered table-hover table-condensed&quot;&gt;
      &lt;tr style=&quot;font-weight: bold&quot;&gt;
        &lt;td style=&quot;width:40%&quot;&gt;Name&lt;/td&gt;
        &lt;td style=&quot;width:30%&quot;&gt;Status&lt;/td&gt;
        &lt;td style=&quot;width:30%&quot;&gt;Group&lt;/td&gt;
        &lt;td style=&quot;width:30%&quot;&gt;&lt;span ng-show=&quot;tableform.$visible&quot;&gt;Action&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat=&quot;user in users | filter:filterUser&quot;&gt;
        &lt;td&gt;
          &lt;!-- editable username (text with validation) --&gt;
          &lt;span editable-text=&quot;user.name&quot; e-form=&quot;tableform&quot; onbeforesave=&quot;checkName($data, user.id)&quot;&gt;
            {{ user.name || 'empty' }}
          &lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;!-- editable status (select-local) --&gt;
          &lt;span editable-select=&quot;user.status&quot; e-form=&quot;tableform&quot; e-ng-options=&quot;s.value as s.text for s in statuses&quot;&gt;
            {{ showStatus(user) }}
          &lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;!-- editable group (select-remote) --&gt;
          &lt;span editable-select=&quot;user.group&quot; e-form=&quot;tableform&quot; onshow=&quot;loadGroups()&quot; e-ng-options=&quot;g.id as g.text for g in groups&quot;&gt;
            {{ showGroup(user) }}
          &lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;button type=&quot;button&quot; ng-show=&quot;tableform.$visible&quot; ng-click=&quot;deleteUser(user.id)&quot; class=&quot;btn btn-danger pull-right&quot;&gt;Del&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

    &lt;!-- buttons --&gt;
    &lt;div class=&quot;btn-edit&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; ng-show=&quot;!tableform.$visible&quot; ng-click=&quot;tableform.$show()&quot;&gt;
        edit
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;btn-form&quot; ng-show=&quot;tableform.$visible&quot;&gt;
      &lt;button type=&quot;button&quot; ng-disabled=&quot;tableform.$waiting&quot; ng-click=&quot;addUser()&quot; class=&quot;btn btn-default pull-right&quot;&gt;add row&lt;/button&gt;
      &lt;button type=&quot;submit&quot; ng-disabled=&quot;tableform.$waiting&quot; class=&quot;btn btn-primary&quot;&gt;save&lt;/button&gt;
      &lt;button type=&quot;button&quot; ng-disabled=&quot;tableform.$waiting&quot; ng-click=&quot;tableform.$cancel()&quot; class=&quot;btn btn-default&quot;&gt;cancel&lt;/button&gt;
    &lt;/div&gt; 
    
  &lt;/form&gt;
&lt;/div&gt;</pre>
                      <h3>controller.js</h3>
                      <pre class="prettyprint">app.controller('EditableTableCtrl', function($scope, $filter, $http, $q) {
  $scope.users = [
    {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
    {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
    {id: 3, name: 'awesome user3', status: 2, group: null}
  ]; 

  $scope.statuses = [
    {value: 1, text: 'status1'},
    {value: 2, text: 'status2'},
    {value: 3, text: 'status3'},
    {value: 4, text: 'status4'}
  ]; 

  $scope.groups = [];
  $scope.loadGroups = function() {
    return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
      $scope.groups = data;
    });
  };

  $scope.showGroup = function(user) {
    if(user.group &amp;&amp; $scope.groups.length) {
      var selected = $filter('filter')($scope.groups, {id: user.group});
      return selected.length ? selected[0].text : 'Not set';
    } else {
      return user.groupName || 'Not set';
    }
  };

  $scope.showStatus = function(user) {
    var selected = [];
    if(user.status) {
      selected = $filter('filter')($scope.statuses, {value: user.status});
    }
    return selected.length ? selected[0].text : 'Not set';
  };

  $scope.checkName = function(data, id) {
    if (id === 2 &amp;&amp; data !== 'awesome') {
      return &quot;Username 2 should be `awesome`&quot;;
    }
  };

  // filter users to show
  $scope.filterUser = function(user) {
    return user.isDeleted !== true;
  };

  // mark user as deleted
  $scope.deleteUser = function(id) {
    var filtered = $filter('filter')($scope.users, {id: id});
    if (filtered.length) {
      filtered[0].isDeleted = true;
    }
  };

  // add user
  $scope.addUser = function() {
    $scope.users.push({
      id: $scope.users.length+1,
      name: '',
      status: null,
      group: null,
      isNew: true
    });
  };

  // cancel all changes
  $scope.cancel = function() {
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];    
      // undelete
      if (user.isDeleted) {
        delete user.isDeleted;
      }
      // remove new 
      if (user.isNew) {
        $scope.users.splice(i, 1);
      }      
    };
  };

  // save edits
  $scope.saveTable = function() {
    var results = [];
    for (var i = $scope.users.length; i--;) {
      var user = $scope.users[i];
      // actually delete user
      if (user.isDeleted) {
        $scope.users.splice(i, 1);
      }
      // mark as not new 
      if (user.isNew) {
        user.isNew = false;
      }

      // send on server
      results.push($http.post('/saveUser', user));      
    }

    return $q.all(results);
  };
});</pre>
                    </section>
          <section id="themes"></section>
          <h1>Themes</h1>
          <!-- jade cannot include dynamically--><p>There are several themes that can be used to style editable controls.</p>
<p>To set the theme for the entire application, set <code>editableOptions.theme</code> in <code>app.run</code>.</p>
<p>To change the theme for a specific control, set the <code>editable-theme</code> attribute. To change the icon_set for a specific control, the <code>editable-icon-set</code> attribute could be set similarly.</p>
<p>To display a clear button, set the <code>editableOptions.displayClearButton=true</code> in <code>app.run</code>.</p>
<p>To change the <code>title</code> and <code>aria-label</code> values of the submit/cancel/clear buttons, set the <code>editableOptions</code> properties:</p>

          <pre class="prettyprint">app.run(['editableOptions', function(editableOptions) {
  editableOptions.submitButtonTitle = 'Submit';
  editableOptions.submitButtonAriaLabel = 'Submit';
  editableOptions.cancelButtonTitle = 'Cancel';
  editableOptions.cancelButtonAriaLabel = 'Cancel';
  editableOptions.clearButtonTitle = 'Clear';
  editableOptions.clearButtonAriaLabel = 'Clear';
}]);
</pre>
          <section id="bootstrap4"></section>
          <h2>Bootstrap 4</h2><p>Include <a href="http://getbootstrap.com">Bootstrap 4</a> CSS</p>

          <pre class="prettyprint">&lt;link href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre><p>Set theme in <code>app.run</code>:</p>

          <pre class="prettyprint">app.run(['editableOptions', function(editableOptions) {
  editableOptions.theme = 'bs4';
}]);
</pre><p>To have smaller or bigger controls modify <code>inputClass</code> and <code>buttonsClass</code> properties of theme:</p>

          <pre class="prettyprint">app.run(['editableOptions', 'editableThemes', function(editableOptions, editableThemes) {
  editableThemes.bs4.inputClass = 'form-control-sm';
  editableThemes.bs4.buttonsClass = 'btn-sm';
  editableOptions.theme = 'bs4';
});
</pre><p>Include <a href="https://fontawesome.com">font-awesome</a> CSS.  This is required for the button icons.</p>

          <pre class="prettyprint">&lt;link href=&quot;https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre>
          <section id="bootstrap3"></section>
          <h2>Bootstrap 3</h2><p>Include <a href="http://getbootstrap.com">Bootstrap 3</a> CSS</p>

          <pre class="prettyprint">&lt;link href=&quot;https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre><p>Set theme in <code>app.run</code>:</p>

          <pre class="prettyprint">app.run(['editableOptions', function(editableOptions) {
  editableOptions.theme = 'bs3';
}]);
</pre><p>To have smaller or bigger controls modify <code>inputClass</code> and <code>buttonsClass</code> properties of theme:</p>

          <pre class="prettyprint">app.run(['editableOptions', 'editableThemes', function(editableOptions, editableThemes) {
  editableThemes.bs3.inputClass = 'input-sm';
  editableThemes.bs3.buttonsClass = 'btn-sm';
  editableOptions.theme = 'bs3';
});
</pre>
          <section id="bootstrap2"></section>
          <h2>Bootstrap 2</h2><p>Include <a href="http://getbootstrap.com/2.3.2">Bootstrap 2</a> CSS</p>

          <pre class="prettyprint">&lt;link href=&quot;//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css&quot; rel=&quot;stylesheet&quot;&gt;</pre><p>Set theme in <code>app.run</code>:</p>

          <pre class="prettyprint">app.run(['editableOptions', function(editableOptions) {
  editableOptions.theme = 'bs2';
}]);
</pre>
          <section id="default"></section>
          <h2>Default</h2><p>No additional CSS required.
You can customize theme in <code>app.run</code> by overwriting properties:</p>

          <pre class="prettyprint">app.run(['editableOptions', 'editableThemes', function(editableOptions, editableThemes)
  // set `default` theme
  editableOptions.theme = 'default';
  
  // overwrite submit button template
  editableThemes['default'].submitTpl = '&lt;button type="submit"&gt;ok&lt;/button&gt;';
}]);
</pre><p>Available properties of each theme you can see in source
<a href="https://github.com/vitalets/angular-xeditable/tree/master/src/js/themes.js">themes.js</a></p>
<p>To change appearance of editable links you should overwrite CSS:</p>

          <pre class="prettyprint">a.editable-click {
    color: green;
    border-bottom: dotted 2px green;
}
a.editable-click:hover {
    color: #47a447;
    border-bottom-color: #47a447;
}
</pre><a href="http://jsfiddle.net/NfPcH/48/" target="_blank" class="btn btn-info">View customized theme in jsFiddle</a>
          <section id="reference"></section>
          <h1>Reference</h1>
          <!-- jade cannot include dynamically-->
          <p>List of all possible attributes, properties and methods.</p>
          <section id="ref-element"></section>
          <h2>Reference: editable element</h2>
          <h3>Attributes</h3><p>Attributes can be defined for any element having <code>editable-xxx</code> directive:</p>

          <pre ng-non-bindable class="prettyprint">&lt;a href=&quot;#&quot; editable-text=&quot;user.name&quot; [attributes]&gt; {{user.name | &quot;empty&quot;}} &lt;/a&gt;</pre>
                    <table width="100%" class="table-bordered table-condensed">
                      <thead>
                        <tr>
                          <th width="15%">Name</th>
                          <th width="15%">Type</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>blur</code></td>
                          <td>string</td>
                          <td><p>Action when control losses focus. Values: <code>cancel|submit|ignore</code>.
Has sense only for single editable element.
Otherwise, if control is part of form - you should set <code>blur</code> of form, not of individual element.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>buttons</code></td>
                          <td>string</td>
                          <td><p>Whether to show ok/cancel buttons. Values: <code>right|no</code>.
If set to <code>no</code> control automatically submitted when value changed.
If control is part of form buttons will never be shown.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>e-*</code></td>
                          <td>any</td>
                          <td><p>Attributes defined with <code>e-*</code> prefix automatically transferred from original element to
control.
For example, if you set <code>&lt;span editable-text=&quot;user.name&quot; e-style=&quot;width: 100px&quot;</code>&gt;
then input will appear as <code>&lt;input style=&quot;width: 100px&quot;&gt;</code>.
See <a href="#text-customize">demo</a>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onaftersave</code></td>
                          <td>method</td>
                          <td><p>Called during submit after value is saved to model.
See <a href="#onaftersave">demo</a>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onbeforesave</code></td>
                          <td>method</td>
                          <td><p>Called during submit before value is saved to model.
See <a href="#onbeforesave">demo</a>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>oncancel</code></td>
                          <td>method</td>
                          <td><p>Called when control is cancelled.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onhide</code></td>
                          <td>method</td>
                          <td><p>Called when control is hidden after both save or cancel.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onshow</code></td>
                          <td>method</td>
                          <td><p>Called when control is shown.
See <a href="#select-remote">demo</a>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>popover</code></td>
                          <td>boolean</td>
                          <td><p>Whether to show the editable element in a ui-bootstrap popover. Values: <code>true|false</code>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>usemousedown</code></td>
                          <td>string</td>
                          <td><p>Listen to Mouse Down event instead of click: <code>true|false</code>.
Has sense only for single editable element.</p>
</td>
                        </tr>
                      </tbody>
                    </table>
          <section id="ref-form"></section>
          <h2>Reference: editable form</h2>
          <h3>Attributes</h3><p>Attributes can be defined as:</p>

          <pre class="prettyprint">&lt;form editable-form name=&quot;myform&quot; [attributes]&gt;
...
&lt;/form&gt;
</pre>
                    <table width="100%" class="table-bordered table-condensed">
                      <thead>
                        <tr>
                          <th width="15%">Name</th>
                          <th width="15%">Type</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>blur</code></td>
                          <td>string</td>
                          <td><p>Action when form losses focus. Values: <code>cancel|submit|ignore</code>.
Default is <code>ignore</code>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onaftersave</code></td>
                          <td>method</td>
                          <td><p>Called when form values are saved to model.<br>See <a href="#editable-form">editable-form demo</a> for details.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onbeforesave</code></td>
                          <td>method</td>
                          <td><p>Called after all children <code>onbeforesave</code> callbacks but before saving form values
to model.<br>If at least one children callback returns <code>non-string</code> - it will not not be called.<br>See <a href="#editable-form">editable-form demo</a> for details.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>oncancel</code></td>
                          <td>method</td>
                          <td><p>Called when form is cancelled.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onhide</code></td>
                          <td>method</td>
                          <td><p>Called when form hides after both save or cancel.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>onshow</code></td>
                          <td>method</td>
                          <td><p>Called when form is shown.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>shown</code></td>
                          <td>bool</td>
                          <td><p>Whether form initially rendered in shown state.</p>
</td>
                        </tr>
                      </tbody>
                    </table>
          <h3>Properties</h3><p>Properties are available when you set <code>name</code> attribute of form: </p>

          <pre class="prettyprint">&lt;form editable-form name=&quot;myform&quot;&gt;
// now myform[property] is available in template and $scope.myform[property] - in controller
</pre>
                    <table width="100%" class="table-bordered table-condensed">
                      <thead>
                        <tr>
                          <th width="15%">Name</th>
                          <th width="15%">Type</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>$visible</code></td>
                          <td>bool</td>
                          <td><p>Form visibility flag.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>$waiting</code></td>
                          <td>bool</td>
                          <td><p>Form waiting flag. It becomes <code>true</code> when form is loading or saving data.</p>
</td>
                        </tr>
                      </tbody>
                    </table>
          <h3>Methods</h3><p>Methods are available when you set <code>name</code> attribute of form:</p>

          <pre class="prettyprint">&lt;form editable-form name=&quot;myform&quot;&gt;
// now myform[method] is available in template and $scope.myform[method] - in controller
</pre>
                    <table width="100%" class="table-bordered table-condensed">
                      <thead>
                        <tr>
                          <th width="15%">Method</th>
                          <th width="35%">Params</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>$activate(name)</code></td>
                          <td><strong>name</strong><i> (string) </i>name of field<br>
                          </td>
                          <td><p>Sets focus on form field specified by <code>name</code>.<br/>
When trying to set the focus on a form field of a new row in the editable table, the <code>$activate</code> call needs to be wrapped in a <code>$timeout</code> call so that the form is rendered before the <code>$activate</code> function is called.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>$cancel()</code></td>
                          <td><i>none    </i>
                          </td>
                          <td><p>Triggers <code>oncancel</code> event and calls <code>$hide()</code>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>$hide()</code></td>
                          <td><i>none    </i>
                          </td>
                          <td><p>Hides form with editable controls without saving.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>$setError(name, msg)</code></td>
                          <td><strong>name</strong><i> (string) </i>name of field<br><strong>msg</strong><i> (string) </i>error message<br>
                          </td>
                          <td><p>Shows error message for particular field.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>$show()</code></td>
                          <td><i>none    </i>
                          </td>
                          <td><p>Shows form with editable controls.</p>
</td>
                        </tr>
                      </tbody>
                    </table>
          <section id="ref-options"></section>
          <h2>Reference: editable options</h2>
          <h3>Options</h3><p>Options are set in app.run</p>

          <pre class="prettyprint">app.run(['editableOptions', function(editableOptions) {
editableOptions.theme = 'bs3';
...
}]);
</pre>
                    <table width="100%" class="table-bordered table-condensed">
                      <thead>
                        <tr>
                          <th width="15%">Name</th>
                          <th width="15%">Type</th>
                          <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>activate</code></td>
                          <td>string</td>
                          <td><p>How input elements get activated. Possible values: <code>focus|select|none</code>.
Default is <code>focus</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>activationEvent</code></td>
                          <td>string</td>
                          <td><p>Event, on which the edit mode gets activated.
Can be any event.
Default is <code>click</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>blurElem</code></td>
                          <td>string</td>
                          <td><p>Default value for <code>blur</code> attribute of single editable element.
Can be <code>cancel|submit|ignore</code>.
Default is <code>cancel</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>blurForm</code></td>
                          <td>string</td>
                          <td><p>Default value for <code>blur</code> attribute of editable form.
Can be <code>cancel|submit|ignore</code>.
Default is <code>ignore</code>.</p>
</td>
                        </tr>
                        <tr>
                          <td><code>buttons</code></td>
                          <td>string</td>
                          <td><p>Whether to show buttons for single editable element.
Possible values <code>right</code>, <code>no</code>.
Default is <code>right</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>cancelButtonAriaLabel</code></td>
                          <td>string</td>
                          <td><p>The default aria label of the cancel button.
Default is <code>Cancel</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>cancelButtonTitle</code></td>
                          <td>string</td>
                          <td><p>The default title of the cancel button.
Default is <code>Cancel</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>clearButtonAriaLabel</code></td>
                          <td>string</td>
                          <td><p>The default aria label of the clear button.
Default is <code>Clear</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>clearButtonTitle</code></td>
                          <td>string</td>
                          <td><p>The default title of the clear button.
Default is <code>Clear</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>displayClearButton</code></td>
                          <td>boolean</td>
                          <td><p>Whether to display the clear button.
Default is <code>false</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>icon set</code></td>
                          <td>string</td>
                          <td><p>icon_set. Possible values <code>font-awesome</code>, <code>default</code>.
Default is <code>default</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>isDisabled</code></td>
                          <td>boolean</td>
                          <td><p>Whether to disable x-editable. Can be overloaded on each element.
Default is <code>false</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>submitButtonAriaLabel</code></td>
                          <td>string</td>
                          <td><p>The default aria label of the submit button.
Default is <code>Submit</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>submitButtonTitle</code></td>
                          <td>string</td>
                          <td><p>The default title of the submit button.
Default is <code>Submit</code></p>
</td>
                        </tr>
                        <tr>
                          <td><code>theme</code></td>
                          <td>string</td>
                          <td><p>Theme. Possible values <code>bs4</code>, <code>bs3</code>, <code>bs2</code>, <code>default</code>.
Default is <code>default</code></p>
</td>
                        </tr>
                      </tbody>
                    </table>
        </div>
      </div>
    </div>
    <footer>
      <hr><p>If you have question or idea please feel free to <a href="https://github.com/vitalets/angular-xeditable/issues">open issue on github</a>.</p>

      <p>&copy; Vitaliy Potapov 2013. Released under the MIT license.</p>
    </footer><!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
    if (!isProd()) return;

    (w[c] = w[c] || []).push(function() {
        try {
            w.yaCounter22341505 = new Ya.Metrika({id:22341505,
                    accurateTrackBounce:true});
        } catch(e) { }
    });

    var n = d.getElementsByTagName("script")[0],
        s = d.createElement("script"),
        f = function () { n.parentNode.insertBefore(s, n); };
    s.type = "text/javascript";
    s.async = true;
    s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";

    if (w.opera == "[object Opera]") {
        d.addEventListener("DOMContentLoaded", f, false);
    } else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/22341505" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
  </body>
</html>